Html 纯CSS图像悬停，不使用背景图像

我正在尝试在悬停/滚动时进行纯CSS图像更改，而不使用背景图像。到目前为止，我有一个图像，当您滚动该图像时，会出现另一个图像。以下是CSS：

#hidden {
display: none;
}

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

因此，当您滚动显示

#visible

div时，将显示

#hidden

div。以下是JSFIDLE：

这很好，但这并不是我想要完成的。我想交换图像。因此，当您翻转

#visible

时，它应该消失，而不是保持可见。我最初的想法是将

#div设置为悬停时的
display:none
（
#visible:hover display:none；
），但这不起作用

那么，有人知道我如何使用这种方法成功地将其转换为传统的图像悬停/交换吗？任何帮助都将不胜感激，这里是JSFIDLE
 

编辑：代码：

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

#隐藏{
显示：无；
位置：绝对位置；
顶部：8px；
左：8px；
}
#可见：悬停+隐藏{
显示：块；
}
#隐藏的，可见的{
宽度：300px；
高度：300px；
}
使用您将鼠标悬停在以下位置的容器：


另请参见以下答案：
像这样吗


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

从未想过使用绝对定位！哈哈，这就像是某种错觉。兄弟，你应该在你的回答中准确地写下你所做的事情。（直到5分钟我才接受答案）我在下面评论说ikke的方法可能是最好的。我的JSFIDLE一点也不坏，所以不知道你为什么这么说。当我将鼠标悬停在图像上时，它会闪烁，而在第二次悬停时，它什么也不做。我使用的是Firefox 22.0。是的，它不应该这样做。这就是为什么我提到它是buggy:-）但让我们面对现实，它不是我的代码。很明显，这是您的浏览器或您在浏览器中使用的插件。这实际上可能比我的答案要好。容器应该有：
display:inline blockdiv {
    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;
}