使用 CSS 反向图像悬停

Posted 2023-03-06

【中文标题】使用 CSS 反向图像悬停

【英文标题】：Image Hover in Reverse using CSS

【发布时间】：2012-07-10 07:30:54

【问题描述】：

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

此效果使用 CSS 和 webkit。

但问题是，当您将鼠标悬停在图像上时，效果会发生但不会反转，这意味着当您离开图像时它不会淡入。但这就是我想要的效果。

这是 html 标记...

<div id="info"><img src="infow1.png"   /></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 在您将鼠标悬停在图像上时淡出，然后在您离开时淡入。

【问题讨论】：

您希望图像最初可见，然后在悬停后淡出？

【参考方案1】：

这是你要找的吗？

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/

【参考方案2】：

您没有创建适用于未悬停图像的规则，因此如果您创建一些规则，如下所示：

#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，这似乎与您的描述相符。