CSS交叉漸變圖像

Question

我有這個代碼很好用。當我將鼠標放在圖像上時，它會交叉淡入另一幅圖像。

我想要的是：當我通過鼠標的圖像交叉淡入淡出，像這樣休息，我的意思是，只做1次過渡。

1）圖像1 2）的onmouseover圖像2 3）onmouse出的圖像2

這裏我的代碼：

<div id="crossfade"> 
<img class="bottom" src="images/site3/pasarela1.png" /> 
<img class="top" src="images/site3/pasarela2.png" /> 
</div> 

這裏我的CSS代碼：

#crossfade { 
position:relative; 
height:250px; 
width:400px; 
} 
#crossfade img { 
position:absolute; 
left:0; 
opacity: 1; 
-webkit-transition: opacity 1s ease-in-out; 
-moz-transition: opacity 1s ease-in-out; 
-o-transition: opacity 1s ease-in-out; 
-ms-transition: opacity 1s ease-in-out; 
transition: opacity 1s ease-in-out; 
} 

#crossfade img.top:hover { 
opacity:0; 
} 

Answer 1

從我得到的是，你希望：懸停狀態「堅持」。雖然它不是純粹的CSS解決方案，但如果您使用的是jQuery的.addClass，則可以採用一種可靠的方法來處理此問題。

$('.yourimage').mouseover(function() { //hover over your image to trigger the event 
    $(this).addClass('yourAnimationClass'); //add the animation class to the image you hovered over 
});