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

Question

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

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

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

Answer 2

我修改了与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/

Answer 3

你可以做的是通过设置欺骗一点,width然后height0来隐藏实际图像并应用一些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标记符合您希望的大小(实际图像大小的一半).

小提琴

Answer 4

我有类似的问题,但我的解决方案是有两个图像,一个隐藏(显示:无)和一个可见.在悬停在周围跨度上时,原始图像将更改为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>

Answer 5

这是使用纯CSS的替代方法.我们的想法是在HTML标记中包含这两个图像,并相应地显示或隐藏它们:悬停

HTML

<a>
   <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png" /> 
   <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png" />
</a>

CSS

a img:last-child {
  display: none;  
}
a:hover img:last-child {
  display: block;  
}
a:hover img:first-child {
  display: none;  
}

jsfiddle:https://jsfiddle.net/m4v1onyL/

请注意,所使用的图像具有相同的尺寸以便正确显示.此外,这些图像文件大小非常小,因此在这种情况下加载多个不是问题,但如果您要切换大尺寸图像的显示,则可能是这样.

Answer 6

关于语义，我不喜欢迄今为止给出的任何解决方案。因此，我个人使用以下解决方案：

.img-wrapper {
  display: inline-block;
  background-image: url(https://www.w3schools.com/w3images/fjords.jpg);
}

.img-wrapper > img {
  vertical-align: top;
}

.img-wrapper > img:hover {
  opacity: 0;
}

<div class="img-wrapper">
  <img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="image" />
</div>

这是一个只有 CSS 的解决方案，具有良好的浏览器兼容性。它使用一个图像包装器，该包装器具有最初由图像本身隐藏的背景。在悬停时，图像通过不透明度隐藏，因此背景图像变得可见。这样，标记代码中就没有空的包装器，而是一个真实的图像。

Answer 7

我还有一个解决方案。如果有人使用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 ^^。