我有这段代码,效果很好。当我将鼠标移到图像上时,它会淡入淡出到另一幅图像。
我想要的是:当我通过鼠标时,图像交叉淡入淡出并像这样静止,我的意思是,只进行 1 次转换。
1) 图片 1 2)鼠标悬停图像2 3)鼠标移出图片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;
}
最佳答案
据我了解,您希望 :hover 状态“保持”。虽然它不是纯 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
});
关于html - CSS 淡入淡出图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13236731/