如何在悬停时更改 <img> 标签的来源？答案

【问题标题】：How to change source of <img> tag on hover?如何在悬停时更改 <img> 标签的来源？
【发布时间】：2013-08-04 15:05:30
【问题描述】：

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

我试过了，但是不行：

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。

【问题讨论】：

content 仅适用于 :before 或 :after 所以这不起作用。为什么不使用带有背景图像的div 并在悬停时更改该背景图像？
我不想使用DIV。
我不相信您可以仅使用 CSS 更改源属性。 jQuery 或普通的 JavaScript 是做这个简单的好选择......我同意@putvande，content: 仅适用于 :before 或 :after
嗯...你可以设置img标签的背景图片，然后从你的图片中删除src。虽然这有点奇怪，但它会起作用。 @HamedKamrava：您只能使用图像还是可以使用其他东西？
这只对 CSS2 不起作用。在 CSS3 中，您的解决方案应该可以完美运行，因为不需要 :before 或 :after 伪类来使用 content:url(...)。更新：这仅适用于 Webkit / Google Chrome。

标签： html css

【解决方案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');
}

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

【讨论】：

此外，如果您使用 CSS 选项，如果您不希望图像在需要悬停时“闪烁”进入视图，您可以通过将其预加载到页面上某处隐藏：<img src="..." style="visibility: hidden" />

【解决方案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/

【讨论】：

控制台和网络未显示任何活动。我能理解这种情况的唯一方法是因为它被兑现了，这是一个简单而有效的答案。

【解决方案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/

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

【讨论】：

@putvande 方法可能类似，但这是一个完整且简化的工作示例，可以更好地利用 CSS 选择器
此解决方案还允许您仍然使用 img 的 srcset 属性，这是视网膜显示器上清晰图像所必需的。

【解决方案4】：

我遇到了类似的问题，但我的解决方案是设置两张图片，一张隐藏（显示：无），一张可见。在将鼠标悬停在周围的跨度上时，原始图像更改为 display:none，另一个图像更改为 display: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>

【讨论】：

仅供参考，您可以说 span#initial 代替 span[id="initial"]

【解决方案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');
}

以及使img 标记成为您想要的大小的填充（实际图像大小的一半）。

Fiddle

【讨论】：

为什么要使用 DIV？

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

【讨论】：

【解决方案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 ^^。

【讨论】：

如果 OP 不想要 Javascript，那么使用 JS 框架的解决方案几乎不可能是相关的，对吧？
更好（如果没人介意为此使用 Angular）：jsfiddle.net/ec9gn/420（添加了 ng-init 并完全删除了控制器）。
好答案....我只是使用了 ng-init="img=''" 而无需声明 $scope.img

【解决方案8】：

我遇到了类似的问题 - 我想在 :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 图像。

【讨论】：

【解决方案9】：

Fiddle

同意 AshisKumar 的回答，
有一种方法可以通过使用 jQuery 功能更改鼠标悬停时的图像网址，如下所示：

$(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 使用 a 和 display:block 与 div 有何不同？主题发起者希望通过css 更改img 的src 属性，而不是一些绕行。

【解决方案10】：

由于您无法使用 CSS 更改 src：如果您可以选择 jQuery，请检查此小提琴。

Demo

$('#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 属性。

值得注意的是，您需要像小提琴中一样包含 jQuery 库才能完成这项工作。

【讨论】：

【解决方案11】：

您不能使用 css 更改 img src。不过，您可以使用以下纯 css 解决方案。 HTML：

<div id="asks"></div>

CSS：

#asks {
  width: 100px;
  height: 100px;
  background-image: url('http://dummyimage.com/100x100/0000/fff');
}

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

或者，如果您不想使用带有背景图像的 div，您可以使用 javascript/jQuery 解决方案。 html:

<img id="asks" src="http://dummyimage.com/100x100/000/fff" />

jQuery:

$('#asks')
  .mouseenter(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/eb00eb/fff');})
  .mouseleave(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/000/fff');});

【讨论】：

【解决方案12】：

就个人而言，我会选择其中一种 JavaScript / jQuery 解决方案。这不仅可以保持您的 HTML 语义（即，图像显示为 img 元素，其通常的 src 图像在标记中定义），而且如果您使用 JS/jQuery 解决方案，那么您还可以使用 JS/ jQuery 来预加载你的悬停图像。

预加载悬停图像意味着当用户将鼠标悬停在原始图像上时可能不会出现下载延迟，从而使您的网站表现得更加专业。

这确实意味着您对 JS 有依赖，但没有启用 JS 的极少数人可能不会太大惊小怪 - 其他人都会获得更好的体验......而且您的代码会很好，也是！

【讨论】：

【解决方案13】：

您不能使用CSS 更改img 标签的src 属性。可以使用 Javascript onmouseover() 事件处理程序。

HTML：

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

Javascript：

function hover() {
  document.getElementById("my-img").src = "http://dummyimage.com/100x100/eb00eb/fff";
}

【讨论】：

此功能有效，但是当用户将鼠标从图像上移开时，图像不会变回原始图像。你能帮忙写那个代码吗？谢谢

【解决方案14】：

为此，您可以使用以下代码

1) html

<div id = "aks">

</div>

2）CSS

#aks
    {
        width:100px;
height:100px;    

        background-image:url('http://dummyimage.com/100x100/000/fff');}

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

}

【讨论】：

【解决方案15】：

在旧版浏览器上，:hover 仅适用于 <a> 元素。所以你必须做一些事情like this才能让它工作。

<style>
a#aks
{
    width:100px;
    height:100px;
    display:block;
}

a#aks:link
{
  background-image: url('http://dummyimage.com/100x100/000/fff');
}

a#aks:hover
{
  background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
}
</style>

<a href="#" id="aks"></a>

【讨论】：

【解决方案16】：

以下代码适用于 Chrome 和 Firefox

<a href="#"><img src="me-more-smile.jpg" onmouseover="this.src='me-thinking-about-a-date.jpg'" onmouseout="this.src='me-more-smile.jpg'" border="0" alt=""/></a>

【讨论】：

【解决方案17】：

试试这个代码。

   .card {

            width: 200px;

            height: 195px;

            position: relative;

            display: inline-block;

        }

        .card .img-top {

            display: none;

            position: absolute;

            top: 0;

            left: 0;
           
            z-index: 99;
width:200px;
        }

        .card:hover .img-top {

            display: inline;

        }

 <!DOCTYPE html>

    <html lang="en">

    <head>

    <title>Image Change on Hover with CSS</title>

 
    </head>

    <body>

        <div class="card">

            <img src="http://www.dhresource.com/200x200s/f2-albu-g5-M00-EC-97-rBVaJFkAobCAHD9XAADvz9DDocA266.jpg/diy-wall-stickers-home-decor-nature-colorful.jpg" alt="Card Back" style="width:200px">

            <img src="https://s-media-cache-ak0.pinimg.com/236x/31/17/98/3117987a0be0a7d8976869aabf54d2d7.jpg" class="img-top" alt="Card Front">

        </div>

    </body>

    </html>

【讨论】：

来源：tutorialrepublic.com/…

【解决方案18】：

这是一个纯 CSS 解决方案。将可见图像放在 img 标签中，将第二张图像作为背景放在 css 中，然后在悬停时隐藏图像。

.buttons{
width:90%;
margin-left:5%;
margin-right:5%;
margin-top:2%;
}
.buttons ul{}   
.buttons ul li{
display:inline-block;
width:22%;
margin:1%;
position:relative;
}
.buttons ul li a p{
position:absolute;
top:40%;
text-align:center;
}   
.but1{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but1 a:hover img{
visibility:hidden;
}   
.but2{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but2 a:hover img{
visibility:hidden;
}   
.but3{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but3 a:hover img{
visibility:hidden;
}   
.but4{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}   
.but4 a:hover img{
visibility:hidden;
}           

<div class='buttons'>
<ul>
<li class='but1'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Blog</p></a></li>
<li class='but2'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /> <p>Herrero</p></a></li>
<li class='but3'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Loftin</p></a></li>
<li class='but4'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Contact</p></a></li>
</ul>
</div>

【讨论】：

【解决方案19】：

为图片更改src 的最佳方法是：

<img src='willbehidden.png' style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">

观看现场演示：http://www.audenaerde.org/csstricks.html#imagereplacecss

享受吧！

【讨论】：

【解决方案20】：

还有另一种仅使用 HTML 和 CSS 的简单方法！

只需像这样用 div 包装您的 <img> 标记：

<div class="image-wrapper">
    <img src="http://dummyimage.com/100x100/000/fff">
</div>

然后，在您的 CSS 文件中隐藏 img 并为包装 div 元素设置背景图片：

.image-wrapper:hover {
    background-image: url(http://dummyimage.com/100x100/eb00eb/fff);
    background-size: contain;
    background-repeat: no-repeat;
}

.image-wrapper:hover img {
    display: none;
}

等等！

【讨论】：