在鼠标悬停时更改图像

Question

我有一个简单的html/css页面,在那里我展示了一张图片.

现在,当用户在图片上移动鼠标时,我想将图片换成其他图像.
离开图像区域后,应再次显示旧图像.

我怎样才能做到这一点？一个没有javascript工作的版本是最好的.

提前致谢!

Answer 1

将鼠标悬停在元素上时,可以使用CSS更改元素的背景图像.该hover伪类支撑在最新的浏览器的大多数元素,但向后兼容(Internet Explorer 6中),你需要使用一个锚标记hover工作.

链接中的onclick事件只是为了在你点击它时没有任何反应,它与悬停效果无关.如果您愿意,可以在单击图像时执行某些操作.

HTML:

<a href="#" id="picture" onclick="return false;"></a>

CSS:

#picture {
   display: block;
   width: 200px;
   height: 200px;
   background-image: url(firstimage.gif);
   border: none;
   text-decoration: none;
}
#picture:hover {
   background-image: url(hoverimage.gif);
}

Answer 2

这看起来相当简洁,写得很好(注意:CSS翻转解决方案不适用于IE6.)