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/了解更多信息

或SO上的类似项目：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");
    });
});

DEMO： http://jsfiddle.net/UJR8M/

使用Jquery将鼠标悬停在图像上

3 个答案: