纯CSS图像悬停而不使用背景图像

Question

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

#hidden {
display: none;
}

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

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

这很好用,但这并不是我想要完成的.我想要交换图像.所以当你翻转时#visible,它应该消失而不是保持可见.我的第一个想法是将#visiblediv设置为display:noneon hover(#visible:hover display:none;),但这不起作用.

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

Answer 1

使用悬停在其上的容器:

.hidden {
    display: none;
}

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

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