图像悬停反向使用CSS

我有一个css图像悬停效果，其中div中的图像变为0不透明度，然后显示背景图像。这意味着当你悬停时，一个图像淡出，另一个出现。图像悬停反向使用CSS

此效果使用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淡出，当鼠标悬停在当你离开时图像会淡入。

来源

2012-07-10 williamchanter

您希望图像初始可见，然后在悬停淡出后？ – kamalo 2012-07-10 18:47:53

这是你在找什么？

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/

来源

2012-07-10 18:51:02 JSW189

谢谢，完美！ – williamchanter 2012-07-10 19:34:12

您已经创建了适用于unhovered图像，所以如果你创建了一些规则，因为这样没有规则：

#info img { 
    opacity: 1; 
    -webkit-transition: opacity; 
    -webkit-transition-timing-function: ease-out; 
    -webkit-transition-duration: 500ms; 
}

JS Fiddle demo。

它应该如你所愿地工作。

相比之下，相同的演示没有隐藏的#info img规则：JS Fiddle demo，它似乎与您的描述相符。

来源

2012-07-10 18:51:55

图像悬停反向使用CSS

回答

相关问题