过渡效果不起作用

Question

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

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

我的HTML＆amp; CSS代码如下。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要将过渡应用于主类。不是增加效果/等级。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用opacity 0和1而不是可访问性：

＆＃13;

＆＃13;

.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%;
}
.product-box a:hover .link-icon
{
	opacity: 1;
	-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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;