jQuery_jquery の複数要素のホバー イベント ソリューション
WBOY
リリース： 2016-05-16 16:44:47
オリジナル
1621 人が閲覧しました
1. 要件の概要
jQuery のホバー イベントは単一の HTML 要素のみに対応します。例:
$('#login').hover(fun2, fun2);
fun1 関数は次のとおりです。マウスが #login 要素に入ったときに呼び出され、離れるときに fun2 関数が呼び出されます。この API はほとんどのニーズを満たすことができます。
ただし、場合によっては、マウスが 2 つ以上の要素に入ったときに fun1 がトリガーされ、マウスが要素から離れたときに fun2 がトリガーされるようにしたい場合がありますが、これらの要素間でマウスを移動してもイベントはトリガーされません。たとえば、以下に示すように、2 つの HTML 要素が隣り合っています。
マウスが 2 つの間の領域に入ると fun1 がトリガーされ、fun2 はマウスが 2 つの間の領域に入るとトリガーされます。ネズミの葉。次のメソッドを使用することを検討してください
$ ('#trigger, #drop'),hover(fun1, fun2);
#trigger から #drop を入力すると fun2 と fun1 がトリガーされるため、このメソッドはニーズを満たしません。この問題を解決する比較的簡単な方法は、HTML 構造を次のように変更することです。
$('#container').hover(fun1, fun2);
この方法この機能を実現するには、親要素のホバー イベントをバインディングします。
2. 研究例
下の図は、一般的なドロップダウン メニューの簡略図です。
ul id="#nav ">
ドロップダウンメニュー
この CSS では、最初の層の li 要素に 14 ピクセルのフォントを設定したいのですが、これは 2 層目の要素にも影響するため、次のようにする必要があります。ステートメントを書き換えます
3. 解決策
HTML 構造を変更します
ドロップダウンメニュー
;
jQuery のホバー イベントは単一の HTML 要素のみに対応します。例:
コードをコピー コードは次のとおりです:
$('#login').hover(fun2, fun2);
fun1 関数は次のとおりです。マウスが #login 要素に入ったときに呼び出され、離れるときに fun2 関数が呼び出されます。この API はほとんどのニーズを満たすことができます。
ただし、場合によっては、マウスが 2 つ以上の要素に入ったときに fun1 がトリガーされ、マウスが要素から離れたときに fun2 がトリガーされるようにしたい場合がありますが、これらの要素間でマウスを移動してもイベントはトリガーされません。たとえば、以下に示すように、2 つの HTML 要素が隣り合っています。
マウスが 2 つの間の領域に入ると fun1 がトリガーされ、fun2 はマウスが 2 つの間の領域に入るとトリガーされます。ネズミの葉。次のメソッドを使用することを検討してください
コードをコピー コードは次のとおりです:
$ ('#trigger, #drop'),hover(fun1, fun2);
#trigger から #drop を入力すると fun2 と fun1 がトリガーされるため、このメソッドはニーズを満たしません。この問題を解決する比較的簡単な方法は、HTML 構造を次のように変更することです。
コードをコピーは次のとおりです:
$('#container').hover(fun1, fun2);
この方法この機能を実現するには、親要素のホバー イベントをバインディングします。
2. 研究例
下の図は、一般的なドロップダウン メニューの簡略図です。
コードをコピー コードは次のとおりです:
ul id="#nav ">
ドロップダウンメニュー
- ドロップダウン項目 2
- ドロップダウン項目 3
JavaScript プログラムも非常に簡単です
コードをコピー コードは次のとおりです: $(' #droplist').hover(function(){
$( this).find('ul').show(); }, function(){
$(this).find(' ul').hide();
});
この実装メソッドには明確なロジックがありますが、HTML のネストされたレベルが多すぎて、CSS を記述するときに非常に不便になります。例:
$(this).find(' ul').hide();
});
この実装メソッドには明確なロジックがありますが、HTML のネストされたレベルが多すぎて、CSS を記述するときに非常に不便になります。例:
コードをコピー コードは次のとおりです: #nav li { font- size:14px; }
この CSS では、最初の層の li 要素に 14 ピクセルのフォントを設定したいのですが、これは 2 層目の要素にも影響するため、次のようにする必要があります。ステートメントを書き換えます
コードをコピーします コードは次のとおりです。 #nav li li { font-size:12px; }
3. 解決策
HTML 構造を変更します
code コードは次のとおりです。
> ;
- ドロップダウン項目 2 項目 3
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31
JS ファイルを順番に紹介します
コードをコピーします コードは次のとおりです:
著者別の最新記事
最新の問題
ブックマークを介して純粋な CSS で要素を作成しました。作成されたが表示されない
私のコードは次のとおりです: g=document.createElement('div');g.setAttribute("id","divcont...
から 2024-04-04 17:27:27
0
1
417
Safari/Firefox iOS でフォームデータを送信できない
これは、iOS 上の Safari/Firefox を除くすべてのプラットフォームで動作します: jQuery("#gform_1").one('submit'...
から 2024-04-04 12:53:48
0
1
303
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
