如何使用 CSS 和 HTML 防止悬停时图像重叠？

使用 CSS/HTML 修复悬停时的图像重叠

尝试使用 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中文网其他相关文章！