CSS：更改img：hover上的图像src [英] CSS: Change image src on img:hover

问题描述

我需要在 hover 上更改< img> 源网址。

I need to change <img> source URL on 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。

This only works for Webkit / Google Chrome.

推荐答案

只有html和css，它不可能改变图像的src。如果您使用div标签替换img标签，那么您可以更改设置为背景的图片，例如

With only html and css, its not posible to change the src of image. If you do replace the img tag with div tag, then you might be able to change the image that is set as the background as like

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

如果你认为你可以使用一些javascript代码，那么你应该能够更改img标签的src如下

And if you think you can use some javascript code then you should be able to change the src of the img tag as below

function hover(element) {
    element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}
function unhover(element) {
    element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}

且html为

<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />

这篇关于CSS：更改img：hover上的图像src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！