【问题标题】：How to put hover on <img src=""> tag?如何将鼠标悬停在 <img src=""> 标签上？
【发布时间】：2017-07-28 22:14:02
【问题描述】：

我有些困惑，我想将鼠标悬停在图像<img> 标签上而不使用“背景图像”。这样当用户尝试将鼠标悬停时，图像就会发生变化。我怎样才能做到这一点？谢谢。

【问题讨论】：

这只是一个建议，但最好使用css的原因是以后更改图像更容易，您只需要更改css文件，而不是一些javascript的硬编码值。
我不想使用“背景图片”
看看这个..如果你正在寻找developer.mozilla.org/en-US/demos/detail/…

【解决方案1】：

1。内联 JavaScript 版本

<img src="a.jpg" onmouseover="this.src='b.jpg'" onmouseout="this.src='a.jpg'" />

this指的是当前的img标签

2。 CSS 版本（推荐）

CSS

a.logo {
  display:block;
  width: 100px;
  height: 100px;
  background: url(/path/to/logo.png) no-repeat center center;
  background-size: contain;
}

a.logo:hover {
  background-image: url(/path/to/logo-hover.png);
}

HTML

<a href="#" class="logo"></a>

通过使用 css，您可以获得更大的灵活性，它甚至可以在禁用 JavaScript 的环境中工作。

3。 JavaScript 处理程序

在高级情况下很有用

var img = document.getElementById('myImg');

img.onmouseout = function () {
   this.src = 'b.jpg';
};

img.onmouseover = function () {
   this.src = 'a.jpg';
};

【讨论】：

确保您的代码在代码块内，使用 ctrl+k。或在编辑器中选择“{}”图像。

【解决方案2】：

内联版本：<img src="original.jpg" onmouseover="this.src='hover.jpg';" onmouseout="this.src='original.jpg';" />

【讨论】：

【解决方案3】：

$(function() {
  $("img")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
        $(this).attr("src", src);
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("over", "");
        $(this).attr("src", src);
    });
 });

准备就绪：

【讨论】：

【解决方案4】：

img:hover {
  background: url("https://i.stack.imgur.com/7KXRp.jpg");
  /* padding: [image-height] [image-width] 0 0 */
  padding: 200px 200px 0 0;
  width: 0;
  height: 0;
}

&lt;img src="https://i.stack.imgur.com/9OcHP.jpg" /&gt;

【讨论】：