如何使用 CSS 或 JavaScript 正确更改悬停时的图像？-css教程-PHP中文网

如何使用 CSS 或 JavaScript 正确更改悬停时的图像？

Susan Sarandon

发布： 2024-12-17 05:34:25

原创

697 人浏览过

How to Properly Change an Image on Hover with CSS or JavaScript?

使用 CSS/HTML 更改悬停时图像的外观

您可能会遇到将图像设置为显示不同的问题鼠标悬停时的图像，但原始图像仍然可见，并且新图像重叠或不改变大小。对于 HTML/CSS 初学者来说，这个看似简单的任务可能会带来挑战。

要解决此问题，请确保使用透明图像文件将原始图像正确设置为透明。此外，请检查您的 CSS 规则是否使用适当的选择器语法定位到正确的元素：

img#Library {
    height: 70px;
    width: 120px;
}

img#Library:hover {
    background-image: url('LibraryHoverTrans.png');
    height: 70px;
    width: 120px;
}

登录后复制

但是，如果使用 CSS 无法解决问题，您可以考虑使用 JavaScript 的替代方法：

<img src='LibraryTransparent.png' onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" />

登录后复制

在此 JavaScript 代码中，onmouseover 和 onmouseout 事件用于根据鼠标交互动态更改图像源。

以上是如何使用 CSS 或 JavaScript 正确更改悬停时的图像？的详细内容。更多信息请关注PHP中文网其他相关文章！