我有一个css图像悬停效果,其中div中的图像变为0不透明,然后显示背景图像。这意味着当你的鼠标悬停时,一个图像消失,另一个出现。
此效果使用CSS和webkit。
但问题是,当你将鼠标悬停在图像上时,效果会发生,但不会反转,这意味着当你离开图像时,效果不会淡入。但这就是我想要的效果。
这是HTML标记。。。
<div id="info"><img src="infow1.png" width="800" height="800" /></div>
这是CSS标记。。。
#info {
background: url(infow2.png) 0 0 no-repeat;
position: fixed;
top: 50%;
left: 50%;
margin-top: -400px;
margin-left: -400px;
width: 800px;
height: 800px;
z-index:100;
opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#info img:hover{
opacity:0;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
所以总的来说,我希望infow.png淡出,当鼠标悬停在图像上时,当你离开时淡入。
最佳答案
这就是你要找的吗?
HTML格式:
<img src="infow1.png" class="fadeOut">
CSS3号:
.fadeOut {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fadeOut:hover {
opacity: 0;
}
JS小提琴:http://jsfiddle.net/AXQW4/1/
编辑:如果您想在悬停时显示不同的图像,可以将其作为
background-image
添加到原始图像的后面:http://jsfiddle.net/8qzcY/关于html - 使用CSS进行反向图像悬停,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/11419813/