我需要更改上的<img>源URL hover。
<img>
hover
我已经尝试过了,但是不起作用:
的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。
仅使用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);" />