当鼠标进入二者的区域时触发fun1,离开时触发fun2。你也许会想到使用下面的方式

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

WBOY
リリース: 2016-05-16 16:44:47
オリジナル
1615 人が閲覧しました
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 構造を変更します


  • >
  • ドロップダウンメニュー

  • ;