如何将鼠标悬停在<img rel="nofollow noreferrer" src ="">标签上？

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,您可以获得更大的灵活性,即使在禁用JavaScript的环境中也能工作.

3. JavaScript处理程序

适用于高级情况

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

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

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

Answer 2

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

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

设置就绪：