不使用背景图像的纯CSS图像哈弗

Question

我试图在不使用背景图像的情况下，在悬停/翻转时进行纯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 on悬浮(#visible:hover display:none;)，但这是行不通的。

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

Answer 1

使用一个容器，在其中进行悬停：

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

.hidden {
    display: none;
}

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

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

也见这个答案：通过CSS隐藏/显示内容:悬停(如果需要JS )

Answer 2

是像这样吗？

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;
}

Answer 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>