jQueryを使用して要素上にホバーしているIFを検出する

ホバリング時に呼び出すアクションを探しているのではなく、現在要素がホバーされているかどうかを確認する方法を探しています。例えば：

$('#elem').mouseIsOver(); // returns true or false

これを実現するjQueryメソッドはありますか？

元の（そして正しい）答え：

is()セレクターを使用して確認できます:hover。

var isHovered = $('#elem').is(":hover"); // returns true or false

例：http : //jsfiddle.net/Meligy/2kyaJ/3/

（これは、セレクターが1つの要素の最大に一致する場合にのみ機能します。詳細については、編集3を参照してください）

。

編集1（2013年6月29日）：（ jQuery 1.9.xのみに適用可能、1.10以降で機能するため、次の編集2を参照）

この回答は、質問が回答された時点での最良の解決策でした。この '：.hover()hover 'セレクターは、jQuery 1.9.xのメソッドの削除で削除されました。

興味深いことに、「allicarn」による最近の回答:hoverは、セレクターをプレフィックスとして付けると、CSSセレクター（vs. Sizzle）として使用できることを示しています$($(this).selector + ":hover").length > 0。

また、別の回答で言及されているhoverIntentプラグインも非常に美しく見えます。

編集2（2013年9月21日）： .is(":hover") 作品

別のコメントに基づいて、私が投稿した元の方法が.is(":hover")実際にはjQueryでも機能することに気づきました。

1. jQuery 1.7.xで動作しました。

2. 1.9.1で動作が停止し、誰かから報告されたため、jQuery hoverがそのバージョンでのイベント処理のエイリアスを削除することに関連していると、私たちはみな考えました。

3. jQuery 1.10.1および2.0.2（おそらく2.0.x）でも再び機能しました。これは、1.9.xでの失敗がバグであるか、または前のポイントで考えた意図的な動作ではなかったことを示唆しています。

これを特定のjQueryバージョンでテストする場合は、この回答の冒頭でJSFidlleサンプルを開き、目的のjQueryバージョンに変更して、[実行]をクリックします。ホバーで色が変わる場合は、機能します。

。

編集3（2014年3月9日）：jQueryシーケンスに単一の要素が含まれている場合にのみ機能します

コメントで@Wilmerが示しているように、彼は、私やここでテストした他のjQueryバージョンに対してさえ機能しないフィドルを持っています。彼の事件の何が特別なのかを見つけようとしたところ、彼は一度に複数の要素をチェックしようとしていることに気づきました。これは投げていましたUncaught Error: Syntax error, unrecognized expression: unsupported pseudo: hover。

だから、彼のフィドルで作業すると、これはうまくいきません：

var isHovered = !!$('#up, #down').filter(":hover").length;

この中にDOESの作品：

var isHovered = !!$('#up,#down').
                    filter(function() { return $(this).is(":hover"); }).length;

また、元のセレクターが1つの要素のみと一致した場合や.first()、結果を呼び出した場合など、単一の要素を含むjQueryシーケンスでも機能します。

これは、私のJavaScript + Web開発のヒントとリソースニュースレターでも参照されています。

使用する：

var hovered = $("#parent").find("#element:hover").length;

jQuery 1.9以降

jQuery 1.9では機能しません。このプラグインをuser2444818の回答に基づいて作成しました。

jQuery.fn.mouseIsOver = function () {
    return $(this).parent().find($(this).selector + ":hover").length > 0;
}; 

http://jsfiddle.net/Wp2v4/1/

ホバーにフラグを設定します。

var over = false;
$('#elem').hover(function() {
  over = true;
},
function () {
  over = false;
});

次に、フラグを確認します。

このテーマにしばらく取り組んだ後、追加する更新をカップルします。

1. .is（ "：hover"）を含むすべてのソリューションがjQuery 1.9.1で中断する
2. マウスがまだ要素上にあるかどうかを確認する最も可能性の高い理由は、相互にイベントが発生しないようにすることです。たとえば、mouseleaveイベントが完了する前に、mouseleaveがトリガーされて完了するという問題がありました。もちろん、これはマウスの動きが速いためでした。

私たちはhoverIntent https://github.com/briancherne/jquery-hoverIntentを使用して問題を解決しました。基本的に、マウスの動きがより慎重である場合にトリガーされます。（注意すべきことの1つは、要素に入るときと出るときの両方のマウスでトリガーされることです。1つだけ使用したい場合は、コンストラクターに空の関数を渡します）

ホバーされたすべての要素から要素をフィルタリングできます。問題のあるコード：

element.filter(':hover')

コードを保存：

jQuery(':hover').filter(element)

ブール値を返すには：

jQuery(':hover').filter(element).length===0

受け入れられた回答は、JQuery 2.xでは機能しませんでした .is(":hover")。すべての呼び出しでfalseを返します。

私はうまくいくかなり単純な解決策に終わりました：

function isHovered(selector) {

    return $(selector+":hover").length > 0

}

@Mohamedの答えを拡張します。少しカプセル化を使用できます

このような：

jQuery.fn.mouseIsOver = function () {
    if($(this[0]).is(":hover"))
    {
        return true;
    }
    return false;
}; 

次のように使用します。

$("#elem").mouseIsOver();//returns true or false

フィドルをフォーク：http : //jsfiddle.net/cgWdF/1/

私は最初の応答が好きですが、私にとっては奇妙です。マウスのページ読み込み直後を確認しようとすると、それが機能するために少なくとも500ミリ秒の遅延を設定する必要があります。

$(window).on('load', function() {
    setTimeout(function() {
        $('img:hover').fadeOut().fadeIn();
    }, 500);
});

http://codepen.io/molokoloco/pen/Grvkx/

キナクタの回答ごとにフラグを設定するのは妥当なようです。リスナーを身体に置いて、特定の瞬間に要素がホバーされているかどうかを確認できます。

ただし、子ノードをどのように処理しますか？要素が現在ホバーされている要素の祖先であるかどうかを確認する必要があります。

<script>

var isOver = (function() {
  var overElement;
  return {

    // Set the "over" element
    set: function(e) {
      overElement = e.target || e.srcElement;
    },

    // Return the current "over" element
    get: function() {
      return overElement;    
    },

    // Check if element is the current "over" element
    check: function(element) {
      return element == overElement;
    },

    // Check if element is, or an ancestor of, the 
    // current "over" element
    checkAll: function(element) {
      while (overElement.parentNode) {
         if (element == overElement) return true;
         overElement = overElement.parentNode;
      }
      return false;
    }
  };
}());


// Check every second if p0 is being hovered over
window.setInterval( function() {
  var el = document.getElementById('p0');
  document.getElementById('msg').innerHTML = isOver.checkAll(el);
}, 1000);


</script>

<body onmouseover="isOver.set(event);">
  <div>Here is a div
    <p id="p0">Here is a p in the div<span> here is a span in the p</span> foo bar </p>
  </div>
  <div id="msg"></div>
</body>