0

我有一个简单的 html/css 页面，我在其中展示了一张图片。

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

我怎样才能做到这一点？最好不要使用 javascript 的版本。

提前致谢！

4

3 回答 3

6

当您将鼠标悬停在元素上时，您可以使用 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);
}
于 2009-09-23T19:36:55.553 回答
5

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

于 2009-09-23T19:25:17.503 回答
1 

<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">

于 2016-06-15T12:10:50.403 回答