不使用背景图像的纯 CSS 图像悬停答案

【问题标题】：Pure CSS Image Hover Without Using Background Images不使用背景图像的纯 CSS 图像悬停
【发布时间】：2013-08-09 18:46:02
【问题描述】：

我正在尝试在不使用背景图像的情况下在悬停/翻转时更改纯 CSS 图像。到目前为止，我有一张图片，当您翻转该图片时，会出现另一张图片。这是 CSS：

#hidden {
display: none;
}

#visible:hover + #hidden {
display: block;
}

因此，当您翻转 #visible div 时，会出现 #hidden div。这是 jsFiddle：http://jsfiddle.net/MNyzd/1/

这很好用，但这并不是我想要完成的。我想交换图像。因此，当您翻转 #visible 时，它应该消失，而不是保持可见。我最初的想法是在悬停时将#visible div 设置为display:none (#visible:hover display:none;)，但这不起作用。

那么有谁知道我如何使用这种方法成功地将其变成传统的图像悬停/交换？任何帮助将不胜感激，这里是 jsFiddle...http://jsfiddle.net/MNyzd/1/

【问题讨论】：

标签： html css

【解决方案1】：

像这样？

jsFiddle

div {
    cursor:pointer;
    overflow:hidden;
    width:300px;
}
div > img:nth-child(2), div:hover > img:nth-child(1) {
    display:none;
}
div:hover > img:nth-child(2) {
    display:block;
}

【讨论】：

【解决方案2】：

使用您进行悬停的容器：

http://jsfiddle.net/MNyzd/8/

.hidden {
    display: none;
}

.container:hover .visible
{
    display: none;
}

.container:hover .hidden {
    display: block;
}

另请参阅此答案：Hide / show content via CSS:hover (or JS if need be)

【讨论】：

这实际上可能比我的答案更好。
.container 应该有：display: inline-block;
我接受了这个答案，因为它适用于 mozilla。谢谢兄弟。
Fiddle 只需要一个 div。

【解决方案3】：

http://jsfiddle.net/MNyzd/4/

编辑：代码：

#hidden {
display: none;
position: absolute; 
top: 8px;
left: 8px; 
}

#visible:hover + #hidden {
display: block;
}

#hidden, #visible {
width:300px;
height:300px;
}

<div id="visible"><img src="http://b.vimeocdn.com/ps/372/159/3721596_300.jpg"></div>
<div id="hidden"><img src="http://yuccan.com/wp-content/uploads/2013/04/cool-eez-spaced2.png"></div>

【讨论】：

从未想过使用绝对定位！哈哈，这就像某种幻觉。您应该准确地发布您在答案中所做的事情。（它不会让我在 5 分钟之前接受答案）
我在下面评论说 ikke 的方法可能是最好的。我的 jsFiddle 根本没有问题，所以不知道你为什么这么说。
当我将鼠标悬停在图像上时，它会闪烁，第二次悬停时什么也不做。我使用的是 Firefox 22.0。
是的，它不应该那样做。这就是为什么我提到它有问题:-)
但是让我们面对现实吧，这不是我的代码。这显然是您的浏览器或您在浏览器中使用的插件。