尝试使用 CSS 和 HTML 更改悬停时的图像时，经常会遇到原始图像无法显示的问题仍然可见，或者新图像的缩放比例不正确。以下是解决此问题的方法：
在 HTML 中，您有一个 ID 为“Library”的元素：
<img src="LibraryTransparent.png">
在 CSS 中，您有以下样式规则：
#Library {
height: 70px;
width: 120px;
}
#Library:hover {
background-image: url('LibraryHoverTrans.png');
height: 70px;
width: 120px;
}这里的问题是，当您更改背景时悬停状态的图像，您没有隐藏原始图像。要解决此问题，您可以使用 display 属性使原始图像在悬停时不可见：
#Library:hover {
background-image: url('LibraryHoverTrans.png');
height: 70px;
width: 120px;
display: block;
}或者，您可以使用 JavaScript 更改 的 src 属性。悬停时的元素：
document.getElementById("Library").onmouseover = function() {
this.src = 'LibraryHoverTrans.png';
};
document.getElementById("Library").onmouseout = function() {
this.src = 'LibraryTransparent.png';
};通过实施这些解决方案之一，您可以确保原始图像被隐藏，并且当您将鼠标悬停在图像上时，新图像显示正确缩放。
以上是如何使用 CSS 和 HTML 防止悬停时图像重叠？的详细内容。更多信息请关注PHP中文网其他相关文章！
