1

私はこの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');
    });
});

どんな種類の助けもいただければ幸いです

4

3 に答える 3

3

.hover()は、一致した要素に2つのハンドラーをバインドし、マウスポインターが要素に入ったときと要素から離れたときに実行されます。

$(".swap").hover(
  function () {
    $(this).attr('src', '/Static/Images/Meny_hover_01.png');
  },
  function () {
    $(this).attr('src', '/Static/Images/Meny_normal_01.png');
  }
);
于 2012-10-30T12:54:40.700 に答える
1

次のように、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はマウスロールオーバーで画像を変更します

于 2012-10-30T12:55:20.190 に答える
0
$(".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/

于 2012-10-30T12:54:22.267 に答える