使用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; 
}