CSS：在img：hover上更改图像src

Question

CSS：在img：hover上更改图像src

我需要更改<img>源URL 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。

Answer 1

我有类似的问题，但我的解决方案是有两个图像，一个隐藏（显示：无）和一个可见。在悬停在周围跨度上时，原始图像将更改为display：none，另一个图像将显示为：block。（可能会根据您的具体情况使用'内联'）此示例使用两个span标记而不是图像，因此您可以在此处运行时查看结果。我遗憾地没有使用任何在线图像源。#onhover&nbsp;{ &nbsp;&nbsp;display:&nbsp;none;}#surround:hover&nbsp;span[id="initial"]&nbsp;{ &nbsp;&nbsp;display:&nbsp;none;}#surround:hover&nbsp;span[id="onhover"]&nbsp;{ &nbsp;&nbsp;display:&nbsp;block;}<span&nbsp;id="surround"> &nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;id="initial">original</span> &nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;id="onhover">replacement</span></span>