使用 CSS 或 JavaScript 更改悬停图像时如何防止图像重叠？

使用 HTML、CSS 和 JavaScript 自定义悬停时的图像外观

处理悬停时的图像过渡时，您可能会遇到常见问题是底层图像仍然可见，并且更新后的图像无法调整到所需的高度和宽度，从而导致重叠。

在您的代码片段中：

<img src="LibraryTransparent.png">

登录后复制

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

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

登录后复制

您更改背景图像的尝试是正确的。但是，要解决高度和宽度问题，您可以在 :hover 选择器中使用以下 CSS 属性：

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

登录后复制

background-size: cover 属性可确保更新的图像填充整个空间元素，防止重叠。

或者，您可以使用 JavaScript 来处理图像转换。这种方法允许您直接更改图像的 src 属性：

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

登录后复制

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