当前位置：文江博客话题详情

鼠标悬停时更改图像

发布于 2024-08-05 12:35:13 字数 154 浏览 1 评论 0原文

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

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

我怎样才能实现这个目标？最好有一个无需 JavaScript 的版本。

提前致谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

请持续率性 2024-08-12 12:35:13

当您将鼠标悬停在元素上时，可以使用 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);
}

You can use CSS to change the background image of an element when you hover over it. The hover pseudo-class is supported on most elements in recent browsers, but to be backwards compatible (Internet Explorer 6), you need to use an anchor tag for hover to work.

The onclick event in the link is just so that nothing happens if you click it, it has nothing with the hovering effect to do. You can of course do something when the image is clicked, if you like.

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);
}

回复收藏 0 原文

撑一把青伞 2024-08-12 12:35:13

这看起来相当简洁并且写得很好（注意：CSS翻转解决方案不会在 IE6 上工作。）

回复收藏 0 原文

扬花落满肩 2024-08-12 12:35:13

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

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

回复收藏 0 原文

~没有更多了~