html - 过渡效果不起作用

Question

我正在尝试在悬停时使用 CSS 过渡效果来获得带有动画效果的按钮可见性，但效果不起作用。

我无法找到我的错误，任何人都可以帮助我解决我的问题。

我的 HTML 和 CSS 代码如下。

.prodiv3
{
	background-color:#d79e37;
	position:relative;
	z-index:999;
}
.product-box a
{
	text-decoration:none;
}
.prodiv3 h2
{
	padding:0px !important;
	margin: 0px !important;
	color: #fff;
	padding-left:15px !important;
}
.prodiv3 p
{
	color: #000000;
	padding-left:15px !important;
}
.link-icon
{
	position:relative; 
	bottom:120px; 
	left:10px;
	visibility:hidden;
	width:60px; 
	height:60px; 
	background:url(../images/link-icon.png) no-repeat center center #ff411c; 
	//display:block; 
	border-radius:100%;
}
.product-box a:hover .link-icon
{
	visibility:visible;
	-moz-transition: all 1s ease-in !important;
	-webkit-transition: all 1s ease-in !important;
	-o-transition: all 1s ease-in !important;
	transition: all 1s ease-in !important;
}

<div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-6 rowm">
            <div class="product-box">
                <a href="continuous_parison.php">
                    <div class="prodiv2">
                        <img src="http://aew.worldwebinfotech.in/images/card1.jpg" alt="" class="img-responsive">
                        <div class="prodiv3">
                            <h2>Continuous<br> Parison Series</h2>
                            <p>Ranging from : 200 ML -5000ML</p>
                            <button class="link-icon"></button>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

Answer 1

您需要将过渡应用到主类。不是添加的效果/类。

.prodiv3
{
	background-color:#d79e37;
	position:relative;
	z-index:999;
}
.product-box a
{
	text-decoration:none;
}
.prodiv3 h2
{
	padding:0px !important;
	margin: 0px !important;
	color: #fff;
	padding-left:15px !important;
}
.prodiv3 p
{
	color: #000000;
	padding-left:15px !important;
}
.link-icon
{
	position:relative; 
	bottom:120px; 
	left:10px;
	opacity:0;
	width:60px; 
	height:60px; 
	background:url(../images/link-icon.png) no-repeat center center #ff411c; 
	//display:block; 
	border-radius:100%;
	-moz-transition: all 1s ease-in !important;
	-webkit-transition: all 1s ease-in !important;
	-o-transition: all 1s ease-in !important;
	transition: all 1s ease-in !important;
}
.product-box a:hover .link-icon
{
	opacity:1;
}

<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-6 rowm">
      <div class="product-box">
        <a href="continuous_parison.php">
          <div class="prodiv2">
            <img src="http://aew.worldwebinfotech.in/images/card1.jpg" alt="" class="img-responsive">									
            <div class="prodiv3">
              <h2>Continuous<br>
                Parison Series</h2>
              <p>Ranging from : 200 ML -5000ML</p>
              <button class="link-icon"></button>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>