如何在悬停时更改<img>标签的来源？
如何在悬停时更改<img>标签的来源？
提问于 2013-08-03 19:11:34
我需要更改hover上的<img>源地址。
我已经尝试过了，但不起作用：
HTML
<img id="my-img" src="http://dummyimage.com/100x100/000/fff"/>CSS
#my-img:hover {
content: url('http://dummyimage.com/100x100/eb00eb/fff');
}任何帮助都将不胜感激。
更新：
这只适用于Webkit / Google Chrome。
回答 20
Stack Overflow用户
回答已采纳
发布于 2013-08-03 19:27:46
只有html和css，改变图片的src是不可能的。如果将img标记替换为div标记，则可以更改设置为背景的图像，如下所示
div {
background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
background: url('http://dummyimage.com/100x100/eb00eb/fff');
}如果您认为可以使用一些javascript代码，那么您应该能够更改img标记的src，如下所示
function hover(element) {
element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}
function unhover(element) {
element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />
Stack Overflow用户
发布于 2014-05-19 17:17:26
我已经修改了一些与Patrick Kostjens相关的更改。
<a href="#">
<img src="http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png"
onmouseover="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/red-bird-icon.png'"
onmouseout="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png'"
border="0" alt=""/></a>演示
Stack Overflow用户
发布于 2016-05-27 22:13:10
这里是使用纯CSS的另一种方法。我们的想法是在HTML标记中包括这两个图像，并相应地在上显示或隐藏这些图像:hover
HTML
<a>
<img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png" />
<img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png" />
</a>CSS
a img:last-child {
display: none;
}
a:hover img:last-child {
display: block;
}
a:hover img:first-child {
display: none;
}jsfiddle：https://jsfiddle.net/m4v1onyL/
请注意，为了正确显示，所使用的图像具有相同的尺寸。此外，这些图像文件大小非常小，因此在这种情况下加载多个图像不是问题，但如果您希望切换大尺寸图像的显示，则可能是问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18032220
复制相关文章
相似问题
腾讯云开发者
