使用CSS过渡上::伪元素

Question

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

之前，我有一个问题与此代码。正如你所看到的，我想要在伪元素:: before之前进行转换，它具有bkg img。

当我悬停时，转换工作顺利，但是当我离开鼠标时，bkg img立即消失而没有转换。

你可以请一些建议吗？

Answer 1

悬停时，您可能只需要与过渡相关的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; 
}