如何在鼠标悬停时更改<img>标记的来源？

Question

我需要在鼠标悬停时更改<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。

- Hamed Kamrava

---

content只适用于:before或 :after，所以这不会起作用。为什么不使用一个带有背景图像的div，并在悬停时更改该背景图像呢？ - putvande

我不想使用 DIV。 - Hamed Kamrava

我不相信你可以仅使用CSS更改源属性。jQuery或普通JavaScript是执行此操作的好选择... 我同意@putvande的观点，content:仅适用于:before或:after。 - sulfureous

嗯...你可以设置img标签的背景图像，然后只需从图像中删除src。虽然有点奇怪，但它会起作用。@HamedKamrava：你只能使用图像还是可以使用其他东西？ - putvande

这只对CSS2无效。在CSS3中，您的解决方案应该完美地运作，因为使用content:url(...)不需要:before或:after伪类。更新：这仅适用于Webkit/Google Chrome。 - Timo Ernst

Answer 1

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

- Ashis Kumar

---

此外，如果您使用CSS选项，在鼠标悬停时，如果您不希望图像在需要加载时“闪烁”出现，您可以通过将其放置在某个隐藏的位置上，在页面上预加载它：<img src="..." style="visibility: hidden" />。 - Steven Jeuris

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>

演示

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

- Surya R Praveen

---

控制台和网络没有显示任何活动。我能理解这种情况发生的唯一方式是因为它被缓存了，这是一个简单而有效的答案。 - 3xCh1_23

您还可以将“this”替换为“document.getElementById”或类，以便定位另一个img src。 - Lal

Answer 3

这里有另一种使用纯CSS的方法。思路是在HTML标记中同时包含这两个图像，并根据:hover的情况来显示或隐藏它们。 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/

请注意，为了正确显示，所使用的图像具有相同的尺寸。此外，这些图像文件大小相当小，因此在此情况下加载多个图像不是问题，但如果您要切换大型图像的显示，则可能会成为问题。

- Canica

---

@putvande 的方法可能类似，但这是一个完整且简化的工作示例，更好地利用了CSS选择器。 - Canica

这个解决方案还允许您继续使用img的srcset属性，以便在Retina显示屏上获得清晰的图像。 - bsigma1

Answer 4

我曾经遇到过类似的问题，我的解决方法是使用两张图片，其中一张是隐藏的（display:none），另一张是可见的。在悬停在周围span标签上时，原始图片变为display:none，另一张图片则变为display:block。（根据您的情况可能会使用“inline”）

这个例子使用了两个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>

- MichaelC

---

请注意，您可以使用span#initial代替span[id="initial"]。 - Adam Katz

Answer 5

你可以通过将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');
}

通过设置padding来使img标签达到你想要的大小（实际图片大小的一半）。

Fiddle

- putvande

---

为什么你要这样做而不是使用DIV？ - gdbj

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的解决方案，具有良好的浏览器兼容性。它利用了一个图像包装器，该包装器具有一种背景，最初被图像本身隐藏。当鼠标悬停时，通过透明度隐藏图像，因此背景图像变得可见。这样，不仅可以在标记代码中拥有一个空包装器，而且可以拥有一个真实的图像。

- Anonymous

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 ^^。

- Chalisi

---

如果 OP 不想要 JavaScript，那么使用 JS 框架的解决方案就不太相关了，对吧？ - Sharadh

更好的方法（如果没有人介意使用Angular）：http://jsfiddle.net/ec9gn/420/（添加了ng-init并完全删除了控制器）。 - Rahul Desai

好的答案...我只是使用了ng-init="img=''"，而不需要声明$scope.img。 - Hatem Badawi

Answer 8

代码演示

同意AshisKumar的答案，
可以使用jQuery功能来实现鼠标悬停时更改图像URL的方法如下：

$(function() {
  $("img")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
        $(this).attr("src", url1); //URL @the time of mouse over on image
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("over", "");
        $(this).attr("src", url2); //default URL
    });
 });

- Naveen Kumar Alone

---

@Naveen，使用display:block与div一起使用的方式有何不同？主题发起人想通过CSS更改img的src属性，而不是采用其他方法。 - Cthulhu

Answer 9

我遇到了类似的问题 - 我想在:hover时更换图片，但由于缺乏Bootstrap的自适应设计，无法使用BACKGRUND-IMAGE。

如果像我一样只想在:hover时更改图片（但不坚持更改特定图像标记的SRC），您可以尝试类似以下这样的解决方案 - 它是纯CSS解决方案。

HTML：

<li>
  <img src="/picts/doctors/SmallGray/Zharkova_smallgrey.jpg">
  <img class="hoverPhoto" src="/picts/doctors/Small/Zharkova_small.jpg">
</li>

CSS（层叠样式表）：

li { position: relative; overflow: hidden; }
li img.hoverPhoto {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 0;
}
li.hover img { /* it's optional - for nicer transition effect */
  opacity: 0;
  -web-kit-transition:  opacity 1s ease;
  -moz-transition:  opacity 1s ease;li 
  -o-transition:    opacity 1s ease;
  transition:   opacity 1s ease;
}
li.hover img.hoverPhoto { opacity: 1; }

如果您想要IE7兼容的代码，您可以通过定位而非透明度来隐藏/显示:HOVER图像。

- e-kinst

Answer 10

由于无法使用CSS更改src，如果您可以使用jQuery，可以查看此代码片段。

演示

$('#aks').hover(
    function(){
      $(this).attr('src','http://dummyimage.com/100x100/eb00eb/fff')
    },
    function(){
      $(this).attr('src','http://dummyimage.com/100x100/000/fff')
    }
)

基本上是使用.hover()方法...它需要两个函数来实现。当你进入悬停状态和离开悬停状态时。

我们使用.attr(属性的缩写)来改变src属性。

值得注意的是，您需要像在fiddle中一样包含jQuery库才能使其正常工作。

- sulfureous