CSS Crossfade图像

Question

我有这个很好的代码。当我将鼠标移到图像上时，它会交叉淡化到另一个图像。

我想要的是：当我越过鼠标时，图像交叉渐变并像这样休息，我的意思是，只进行一次转换。

1）图片1 2）onmouseover图像2 3）onmouse out image 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
});