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

问题描述

我需要更改 hover 上的<img> 源 URL 。

我已经尝试过但不行：

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 。如果您使用 div 标签替换 img 标签，那么您可能会更改设置为背景的图像

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');
}

和 html 是

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

次佳解决方案

我修改了几个关于 Patrick Kostjens 的变化。

<a href="#">
<img src="http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png" 
onmouseover="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/red-bird-icon.png'"
onmouseout="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png'"
border="0" alt=""/></a>

DEMO

http://jsfiddle.net/ssuryar/wcmHu/429/

第三种解决方案

您可以做的是通过将 width 和 height 设置为 0 来隐藏实际图像并应用一些 CSS 来执行所需操作：

#aks {
    width:0px;
    height:0px;
    background:url('http://dummyimage.com/100x100/000/fff');
    padding:50px;
}

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

并且填充使得 img 标签的大小要达到 (实际图像的一半大小) 。

Fiddle

第四种方案

我有一个类似的问题，但我的解决方案是有两个图像，一个隐藏 (显示：无) 和一个可见。在悬停在周围的范围内，原始图像将更改为显示：无，另一个要显示的图像：块。 (可以根据您的情况使用’inline’)

此示例使用两个跨标签而不是图像，因此您可以在此处运行时看到结果。我没有任何在线图像来源不幸使用。



#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>

第五种方案

我还有一个解决方案。如果有人使用 AngularJs：http://jsfiddle.net/ec9gn/30/

<div ng-controller='ctrl'>
    <img ng-mouseover="img='eb00eb'"  ng-mouseleave="img='000'"
         ng-src='http://dummyimage.com/100x100/{{img}}/fff' />
</div>

Javascript：

function ctrl($scope){
    $scope.img= '000';
}

没有 CSS ^^。

参考文献

CSS: Change image src on img:hover

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

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