.posts .img-hover:before {
content: '';
display: block;
opacity: 0;
-webkit-transition: opacity 1.2s ease;
-moz-transition: opacity 1.2s ease;
-ms-transition: opacity 1.2s ease;
-o-transition: opacity 1.2s ease;
transition: opacity 1.2s ease-out;
}
.posts .img-hover:hover:before {
content: '';
display: block;
background: url("img/Texture1.png");
width: 320px;
/* image width */
height: 220px;
/* image height */
position: absolute;
top: 13px;
right: 2px;
opacity: 1;
}
<div class="posts">
<a href="#">
<h2 class="postname">
Travel Flashback #1 </h2>
</a>
<a class="img-hover" href="#">
<img width="960" height="720" src="http://.." class="img-hover" alt="" />
</a>
</div>
我对此代码有一个问题。如您所见,我要在具有bkg img的伪元素:: before上进行过渡。
当我将鼠标悬停时,过渡会顺利进行,但是当我离开鼠标时,bkg img会立即消失而不会过渡。
你能建议点什么吗?
最佳答案
在悬停时,您可能只需要与转换相关的css,而不是伪元素的实际样式。试试这个
.posts .img-hover:before {
content: '';
display: block;
background: url("img/Texture1.png");
width: 320px; /* image width */
height: 220px; /* image height */
position: absolute;
top: 13px;
right: 2px;
opacity: 0;
-webkit-transition: opacity 1.2s ease;
-moz-transition: opacity 1.2s ease;
-ms-transition: opacity 1.2s ease;
-o-transition: opacity 1.2s ease;
transition: opacity 1.2s ease-out;
}
.posts .img-hover:hover:before{
opacity: 1;
}
关于css - 在:: before伪元素上使用CSS过渡,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39489039/