[解決済み] 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()
メソッドを削除しました。
興味深いことに、最近の "allicarn" さんの回答では、この方法で
:hover
をCSSセレクタとして使用する場合(対Sizzle)、セレクタの前に
$($(this).selector + ":hover").length > 0
と、動作するようです
また ホバーインテント プラグインもとても良さそうです。
編集2 (2013年9月21日):
.is(":hover")
作品
別のコメントに基づいて、私は私が投稿した元の方法であることに気づきました。
.is(":hover")
は、実はまだjQueryで動作しているので。
-
jQuery 1.7.xで動作していました。
-
1.9.1 で動作しなくなったのは、ある人が私に報告したときで、私たちは皆、jQuery が
hover
そのバージョンでは、イベント処理のためのエイリアスです。 -
jQuery 1.10.1 と 2.0.2 (たぶん 2.0.x) で再び動作したことから、1.9.x で失敗したのはバグかそうで、前のポイントで考えたような意図的な動作ではなかったと思われます。
特定のjQueryバージョンでテストしたい場合は、この回答の最初にあるJSFidlleの例を開き、希望のjQueryバージョンに変更し、"Run"をクリックするだけです。ホバー時に色が変われば、動作しています。
.
編集3(2014年3月9日)。jQueryのシーケンスが1つの要素を含むときのみ動作する
コメントで@Wilmerが示したように、彼は私や他の人がテストしたjQueryのバージョンに対してさえ動作しないフィドルを持っています。彼のケースについて何が特別なのかを探ろうとしたとき、彼が一度に複数の要素をチェックしようとしていることに気づきました。これは
Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: hover
.
だから、彼のバイオリンで作業すると、これはそうなります。 NOT が動作します。
var isHovered = !!$('#up, #down').filter(":hover").length;
一方、この 動作 の働きをします。
var isHovered = !!$('#up,#down').
filter(function() { return $(this).is(":hover"); }).length;
また、元のセレクタが1つの要素にしかマッチしない場合など、1つの要素を含むjQueryシーケンスで動作します。
.first()
を結果で表示する、など。
関連
-
[解決済み] TypeError: $.ajax(...) is not a function?
-
[解決済み】「.addEventListener is not a function」なぜこのエラーが発生するのか?
-
[解決済み] 要素外でのクリックを検出するにはどうすればよいですか?
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] どのDOM要素にフォーカスがあるかを調べるには?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
fetch ネットワークリクエストラッパーの説明例
-
Vueの要素ツリーコントロールに破線を追加する説明
-
JavaScriptの配列共通メソッド解説
-
VUEグローバルフィルターの概念と留意点、基本的な使い方
-
[解決済み】awaitは非同期関数でのみ有効です。
-
[解決済み】JavaScriptエラー(Uncaught SyntaxError: Unexpected end of input)
-
nodejs unhandledPromiseRejectionWarning メッセージ
-
nullのプロパティinnerHTMLを読み取れません エラーメッセージ
-
[解決済み】jQueryでマウスが要素上にあるかどうかを確認するにはどうすればよいですか?
-
[解決済み] タッチデバイスでボタンのホバーエフェクトがベタベタしないようにする方法