2 
$("img").mouseenter(function(){
    $(this).addClass("move");
});

状況は次のとおりです。ホバーimgすると、.moveクラスが追加されます（つまり、ホバーするとクラスになりimg.moveます）。これは説明がわかりにくいかもしれませんが、問題は、ページロード時にまだホバーされていない.move場合にのみ、クラスを追加する必要があることです。img

説明のために、私のサイトのロゴimgがすべてのページの同じ場所に表示されるとしましょう。

ユーザーがロゴをホバーすると、.moveクラスが追加されます (css を使用してロゴを「移動」させます)。ユーザーがロゴをクリックすると、ホームページがロードされますが、新しいページがロードされたときにマウスがまだロゴの上にある場合、.moveクラスが追加され、ロゴが再び動き回ります。ページの読み込み時にマウスが既にロゴの上にある場合、ロゴが「動き回る」ことは望ましくありません。ページの別の場所からロゴをホバーした場合にのみ「動き回る」必要があります。

私はこれを必要とする：

(ページの読み込み) > (マウスがホバーされていない) > (マウスがホバーされているimg場合 ) > (にクラスをimg追加).moveimg

しかし、これを取り除きます：

(ページの読み込み) > (マウスはすでに上に置かれていますimg) > !!!( にクラスを追加 )!!! <--マウスがすでに.moveimg.moveimg

jQueryでこれを行う最良の方法は何ですか?

4

3 に答える 3

3

これは、ホバー クラスが要素に追加されるのを防ぎ、ユーザーがマウスを要素から離して再び戻すまで追加されないようにするフィドルです。おそらくいくらか単純化できますが、それは概念を証明しています。

テキストをホバーしてテストし、CTRL+Enter を押してサンプルを実行します。

http://jsfiddle.net/PLP2d/2

$(document).ready(function() {
    $(window).one("mousemove", function() {
        $(".anch").hover(function() { $(this).hasClass("prevent") ? 0 : $(this).addClass("over");},
                         function() { $(this).removeClass("over") });

        if ($(".anch").is(":hover")) {
            $(".anch").addClass("prevent")
                      .removeClass("over")
                      .one("mouseleave", function() { $(this).removeClass("prevent") });
        }
    });
});
于 2013-07-08T09:28:23.190 に答える