jQuery_jquery の複数要素のホバーイベントソリューション-jsチュートリアル-php.cn

1. 要件の概要

jQuery のホバーイベントは単一の HTML 要素のみに対応します。例:

コードをコピーコードは次のとおりです:

$('#login').hover(fun2, fun2);

fun1 関数は次のとおりです。マウスが #login 要素に入ったときに呼び出され、離れるときに fun2 関数が呼び出されます。この API はほとんどのニーズを満たすことができます。

ただし、場合によっては、マウスが 2 つ以上の要素に入ったときに fun1 がトリガーされ、マウスが要素から離れたときに fun2 がトリガーされるようにしたい場合がありますが、これらの要素間でマウスを移動してもイベントはトリガーされません。たとえば、以下に示すように、2 つの HTML 要素が隣り合っています。

jQuery_jquery の複数要素のホバーイベントソリューション

マウスが 2 つの間の領域に入ると fun1 がトリガーされ、fun2 はマウスが 2 つの間の領域に入るとトリガーされます。ネズミの葉。次のメソッドを使用することを検討してください

コードをコピーコードは次のとおりです:

$ ('#trigger, #drop'),hover(fun1, fun2);

#trigger から #drop を入力すると fun2 と fun1 がトリガーされるため、このメソッドはニーズを満たしません。この問題を解決する比較的簡単な方法は、HTML 構造を次のように変更することです。

コードをコピーは次のとおりです:

$('#container').hover(fun1, fun2);

この方法この機能を実現するには、親要素のホバーイベントをバインディングします。

2. 研究例

下の図は、一般的なドロップダウンメニューの簡略図です。

jQuery_jquery の複数要素のホバーイベントソリューション

コードをコピーコードは次のとおりです:

ul id="#nav "> 

ドロップダウンメニュー

ドロップダウン項目 2

ドロップダウン項目 3

 JavaScript プログラムも非常に簡単です

コードをコピーコードは次のとおりです: $(' #droplist').hover(function(){

$( this).find('ul').show();

}, function(){ 
$(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

コードをコピーしますコードは次のとおりです:

人気のチュートリアル

詳細>

jQuery_jquery の複数要素のホバー イベント ソリューション

jQuery_jquery の複数要素のホバーイベントソリューション