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 {
  display: none;}#surround:hover span[id="initial"] {
  display: none;}#surround:hover span[id="onhover"] {
  display: block;}

<span id="surround">
    <span id="initial">original</span>
    <span id="onhover">replacement</span></span>