javascript - 如何将鼠标悬停在 标签上？

Question

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

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，您可以获得更大的灵 active ，它甚至可以在禁用 JavaScript 的环境中工作。

3。 JavaScript 处理程序

在高级情况下有用

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

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

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