3

デリゲートを使用して、ネストされた div でホバー効果を機能させています。しかし、ちらつきループが発生しているようで、停止する方法がわかりません。

div は、その.shadow親 div の高さと幅です.box。 

   <div class="wrapper">
       <div class="box">
          <div class="hover"><h2>Joe Bloggs</h2></div>
          <div class="cover"></div>
          <div class="shadow"></div>
          <img class="image" src="_assets/images/joebloggs.jpg" alt="" />
       </div>
    </div>

    $(".wrapper").delegate(".shadow", "mouseover mouseout", function(e) {
       if (e.type == 'mouseover') {
          $(this).parent().find('.cover').show();
          $(this).parent().find('.hover').show();
       } else {
          $(this).parent().find('.cover').hide();
          $(this).parent().find('.hover').hide();
       }
    });
4

2 に答える 2

2

ターゲット要素の上にカーソルを置いている間、イベントが無限ループでトリガーされています。

  1. マウスが入る.shadow
  2. .coverと.hover表示されます
  3. マウスが表示されたまま.shadow離れる.hover
  4. .coverそして.hover隠されている
  5. (GoTo 1. マウスが 3 つのいずれかの上にない場合を除きます)

代わりに mouseenter/mouseleave と madecoverおよびhoverchildren を使用した場合shadow、この問題は発生しません。

于 2012-09-19T15:46:59.140 に答える
0

新しい jQuery メソッド (.on / mouseenter、.delegate は廃止されました) に再コーディングして、目的の効果があるかどうかを確認します。

$(".wrapper").on("mouseenter", ".shadow", function(e) {
   $(this).parent().find('.cover').show();
   $(this).parent().find('.hover').show();
}).on("mouseleave", ".shadow", function(e) {
   $(this).parent().find('.cover').hide();
   $(this).parent().find('.hover').hide();
});
于 2012-09-19T15:38:09.997 に答える