-1

is(':hover')非常に便利ですが、うまくいかないこともあります。

Google Chrome で画像ページを開きます (Chrome 拡張機能を作成しています。コンテンツ スクリプトには jquery が含まれます)。これは機能しませんが、通常の Web ページでは機能します。

機能するかどうかはどうすればわかりますか?

これを保存して関数を拡張し、$.fn.isすべてのmouseinandmouseoutイベントを処理する必要がありますか?

助言がありますか？

編集

adeneoの答えは良さそうですが、うまくいきません。

yckart's answerについては、ノードがイベントを取得しない場合があると思いますmouseleave。これにより、ホバー状態が壊れます。ここで条件が必要です。

私のjQueryのバージョンは1.10

例えば

タグ入力を使用します。入力領域に移動するとタグ セレクターが表示され (div にはタグのリストが表示されます)、入力領域から移動するとタグ セレクターが非表示になります。入力領域を離れるとき、マウスがセレクター領域にあるかどうかを確認する必要があります (遅延を追加します)。そうであれば、セレクターを非表示にしません。セレクターを離れるときに、マウスが入力領域にあるかどうかを確認する必要があります(遅延を追加します)? そうでない場合は、セレクターを非表示にします。

マウスが別の領域に入ることを確認するために遅延を追加します。サブノードとして、セレクターを入力領域に配置することはできません (可能であれば、両方の領域でマウスを離したり入力したりする必要はありません)。

:hover pseudo-selectors はsizzle documentationにありますが、これは悪いことではないと思います。

コードを保持するには、追加する必要があると思います$.expr[':'].hover

jQuery プラグイン

ここでデモjsfiddle

:hovered式をプラグインとして追加し、is(':hovered')直接使用できます。

初回は false を返します。trackHover使用する前に呼び出すこともできますis(':hovered')。

4

1 に答える 1

1

これを行う最善の方法は、次のようなものです。

// add a class if you hover an element
$('*').on('mouseenter mouseleave', function () {
    $(this).toggleClass('hover');
});

// later check for the 'hover'-class
// instead of $('node').is(':hover');
$('node').is('.hover');

アップデート

以下を使用して簡単な式フィルターを作成しましたmatchesSelector。

(function ($) {
    // https://gist.github.com/jonathantneal/3062955
    var html = document.documentElement;
    var matches = html.matchesSelector || html.oMatchesSelector || html.msMatchesSelector || html.mozMatchesSelector || html.webkitMatchesSelector || function (selector) {
        var nodes = (this.parentNode || this.document).querySelectorAll(selector), i = -1;
        while (nodes[++i] && nodes[i] != this);
        return !nodes[i];
    };

    $.expr.filters.hover = function (elem) {
        return matches.call(elem, ':hover');
    };
}(jQuery));

$('div').hover(function () {
    console.log( $(this).is(':hover') );
});
于 2013-07-31T22:08:19.963 に答える