纯CSS图像交换

Question

我有两个图像,它们都需要在HTML中(所以没有背景图像),并且在悬停一个时,它交换为另一个.

我以为我有代码工作,但它似乎是毛病.我无法解决这个问题.

JSFiddle:http://jsfiddle.net/5tCju/

这是我的CSS:

#wrapper img.on,
#wrapper.gridWrap img.on {
display:none;
}

#wrapper img.default:hover img.on,
#wrapper img.default:hover img.on {
display:inline;
}

#wrapperimg.default:hover,
#wrapper img.default:hover {
display:none;
} 

无论如何,这可以通过交换之间的图像来完成display:block;和display:inline;？

Answer 1

要使其工作,您需要将:hover伪类设置为父容器(.wrapper)而不是图像.

jsFiddle演示

#wrapper
{
    display: inline-block;
}
#wrapper:hover img.default,
#wrapper img.on 
{
    display:none;
}

#wrapper:hover img.on,
#wrapper img.default 
{
    display:inline-block;
}