html - 如何在悬停时更改 <img> 标签的来源？

Question

我需要更改 <img> hover 上的源 URL .

我试过了，但是不行:

HTML

<img id="my-img" src="http://dummyimage.com/100x100/000/fff"/>

CSS

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

jsFiddle

如有任何帮助，我们将不胜感激。

更新:

这仅适用于 Webkit/Google Chrome。

Answer 1

只有 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);" />