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

This看起来相当简洁，写得很好（注意：CSS翻转解决方案不适用于IE6。）

Answer 3

<img src="https://pbs.twimg.com/profile_images/677544618326556672/WID2m1_a.png" onmouseout="this.src='https://pbs.twimg.com/profile_images/677544618326556672/WID2m1_a.png'" onmouseover="this.src='https://pbs.twimg.com/profile_images/638751551457103872/KN-NzuRl.png'" alt="image" width="50px" height="50px">

在鼠标悬停时更改图像

3 个答案: