如何更改悬停时的图像源？

更改悬停时的图像源：综合指南

您可能会遇到需要动态更改

的源 URL 的场景;img>当鼠标悬停在其上时标记。虽然这看起来是一项简单的任务，但它并不像人们想象的那么容易实现。

CSS 陷阱

#my-img:hover {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

最初，您可以尝试使用 CSS 的 content 属性来替换图像源，如以下代码所示：

但是，这种方法仅适用于Webkit 浏览器，例如 Google Chrome。其他主要浏览器，例如 Firefox 和 Safari，会忽略此上下文中的 content 属性。

HTML 和 CSS 替代方案

<div>
<pre class="brush:php;toolbar:false">#my-div {
    background-image: url('http://dummyimage.com/100x100/000/fff');
}

#my-div:hover {
    background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
}

如果 CSS 不是一个选项，您可以考虑替换 <img alt="如何更改悬停时的图像源？" >带有

的标签标签。通过设置

的背景图片并在悬停时修改它，您可以有效地实现所需的结果：

JavaScript 解决方案

<img  alt="如何更改悬停时的图像源？" >

const myImg = document.getElementById('my-img');

myImg.addEventListener('mouseover', () => {
    myImg.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
});

myImg.addEventListener('mouseout', () => {
    myImg.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
});

为了获得最大的多功能性，您可以利用 JavaScript直接操作 <img alt="如何更改悬停时的图像源？" > 的 src 属性标签。此方法适用于所有主要浏览器：

通过采用其中一种技术，您可以无缝更改 <img alt="如何更改悬停时的图像源？" > 的源 URL。悬停标记，为您的 Web 应用程序提供动态且引人入胜的视觉体验。