如何更改悬停时的图像源？-css教程-PHP中文网

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

Linda Hamilton

发布： 2024-12-16 18:51:14

原创

360 人浏览过

How Can I Change an Image Source on Hover?

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

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

的源 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>

登录后复制

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

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

登录后复制

如果 CSS 不是一个选项，您可以考虑替换如何更改悬停时的图像源？

带有 <div> 的标签标签。通过设置<div>的背景图片并在悬停时修改它，您可以有效地实现所需的结果：

JavaScript 解决方案

<img>

登录后复制

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直接操作

的 src 属性标签。此方法适用于所有主要浏览器：

通过采用其中一种技术，您可以无缝更改

的源 URL。悬停标记，为您的 Web 应用程序提供动态且引人入胜的视觉体验。

以上是如何更改悬停时的图像源？的详细内容。更多信息请关注PHP中文网其他相关文章！