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 ">
ドロップダウンメニュー
- ドロップダウン項目 2
- ドロップダウン項目 3
JavaScript プログラムも非常に簡単です
$( this).find('ul').show();
}, function(){
$(this).find(' ul').hide();
});
この実装メソッドには明確なロジックがありますが、HTML のネストされたレベルが多すぎて、CSS を記述するときに非常に不便になります。例:
この CSS では、最初の層の li 要素に 14 ピクセルのフォントを設定したいのですが、これは 2 層目の要素にも影響するため、次のようにする必要があります。ステートメントを書き換えます
3. 解決策
HTML 構造を変更します >
ドロップダウンメニュー ;
- ドロップダウン項目 2
項目 3
JS ファイルを順番に紹介します