我想在不使用背景图像的情况下在悬停/翻转时进行纯CSS图像更改.到目前为止,我有一个图像,当您翻转该图像时,会出现另一个图像.这是CSS：

#hidden {
display: none;
}

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

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

这很好用,但这并不是我想要完成的.我想要交换图像.所以当你翻转#visible时,它应该消失而不是保持可见.我的第一个想法是让#visible div显示：无悬停(#visible：hover display：none;),但这不起作用.

那么有没有人知道如何使用这种方法将其成功转换为传统的图像悬停/交换？任何帮助将不胜感激,再次,这里是jsFiddle … http://jsfiddle.net/MNyzd/1/@H_404_14@

.hidden {
    display: none;
}

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

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