jquery - 委托(delegate)闪烁循环

Question

我一直在使用 delegate 来使悬停效果在嵌套 div 上工作。但它似乎会导致闪烁循环，我不知道如何阻止它。

.shadow div 是其父 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();
       }
    });

Answer 1

当鼠标悬停在目标元素上时，您的事件将无限循环地触发。

1. 鼠标输入.shadow
2. .cover和.hover显示
3. 老鼠离开.shadow由于.hover正在显示
4. .cover和.hover被隐藏
5. (转到 1。除非鼠标不再位于三个中的任何一个上)

如果您使用 mouseenter/mouseleave 并创建 cover和hover shadow 的 child ，你就不会有这个问题。