javascript - 使用 Jquery 在悬停时交换回图像

Question

我有这个 HTML 代码：

<a href="#"><img class="swap" src="/Static/Images/Meny_normal_01.png"  alt="" /></a>

这是我的 Jquery 代码，它的作用是当我将鼠标悬停在我的 img 上时，它会切换到另一个 img，但我想悬停一下，然后它会切换回旧的 img。

$(document).ready(function () {
    $('.swap').hover(function () {
        $(this).attr('src', '/Static/Images/Meny_hover_01.png');
    });
});

将不胜感激任何形式的帮助

Answer 1

.hover()将两个处理程序绑定到匹配的元素，在鼠标指针进入和离开元素时执行。

$(".swap").hover(
  function () {
    $(this).attr('src', '/Static/Images/Meny_hover_01.png');
  },
  function () {
    $(this).attr('src', '/Static/Images/Meny_normal_01.png');
  }
);

Answer 2

您可以将 2 个处理程序传递给悬停 - 如下所示：

$(document).ready(function () {
    $('.swap').hover(function () {
        $(this).attr('src', '/Static/Images/Meny_hover_01.png');
    },
    function () {
        $(this).attr('src', '/Static/Images/Meny_normal_01.png');
    }
    );
});

看看：http ://api.jquery.com/hover/了解更多信息

或类似的项目：jquery change image on mouse rollover

Answer 3

$(".swap").hover(function() {
    $(this).attr("src", function(i, val) {
        return val.indexOf("hover") == -1
          ? val.replace("normal", "hover")
          : val.replace("hover", "normal");
    });
});

演示：http: //jsfiddle.net/UJR8M/