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

  • Z时代
  • 2024-01-10
  • 分类：问答

我需要更改上的<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。

回答：

仅使用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);" />

以上是 CSS：在img：hover上更改图片src 的全部内容， 来源链接： utcz.com/qa/436004.html

回到顶部