如何在 <img src=""> 标签上添加悬停效果？

Question

我有一些疑惑，我希望能在不使用"background-image"的情况下，在图像<img>标签上设置悬停效果，这样当用户尝试将鼠标悬停在图像上时，图像将改变。 我应该怎么做？ 谢谢。

- Noumi

---

这只是一条建议，但使用CSS的原因是更容易在以后更改图片，您只需要更改CSS文件，而不是某些JavaScript硬编码的值。 - Didier Ghys

我不想使用 "background-image"。 - Noumi

看这个..如果你正在寻找https://developer.mozilla.org/en-US/demos/detail/image-navigation-menu-tabs - Rafee

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

- amd

---

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

Answer 2

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

这段代码展示了一个图片元素，当鼠标悬停在上面时，它会切换到另一张图片，当鼠标移开时，它会切换回原始的图片。

- Shomz

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

设置on ready事件：

- Sameera Thilakasiri

Answer 4

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

<img src="https://istack.dev59.com/9OcHP.webp" />

- Vadim Ovchinnikov