過渡效果不起作用

Question

我想使用懸停的CSS過渡效果的動畫效果獲得按鈕可見性，但效果不起作用。

我無法找到我的錯誤，任何人都可以幫助我解決我的問題。

我的HTML & CSS代碼如下所示。

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

Answer 2

使用opacity 0和1代替visitbility：

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

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