为什么我的悬停图像重叠而不是替换原始图像？

使用 CSS/HTML 悬停修改图像显示

当尝试在鼠标悬停时用另一个图像替换图像时，可能会出现以下情况：原始图像仍然可见，或者新图像无法调整其尺寸，导致它们重叠。下面是问题和可能的解决方案。

提供的代码显示了问题：

<img  src="/static/imghwm/default1.png" data-src="LibraryTransparent.png" class="lazy" alt="为什么我的悬停图像重叠而不是替换原始图像？" >

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

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

在此代码中，设置悬停时的背景图像可确保第二个图像出现在第一个图像上，但可能无法正确调整其大小或位置。

替代解决方案：使用JavaScript

另一种选择是利用 JavaScript 来处理图像更改：

<img  src="LibraryTransparent.png" onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" alt="为什么我的悬停图像重叠而不是替换原始图像？" >

在这种方法中，当鼠标悬停在 onmouseover 事件上时，onmouseover 事件会将图像源更改为替代图像源，并且 onmouseout 事件会在鼠标离开时将源恢复为原始图像。使用 JS 可以更直接地控制图像操作，确保图像之间的无缝过渡。

以上是为什么我的悬停图像重叠而不是替换原始图像？的详细内容。更多信息请关注PHP中文网其他相关文章！