jquery - 委托闪烁循环

Question

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

.shadowdiv 是它的父 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 和 madecover和hoverchildren of shadow，你就不会有这个问题。

Answer 2

重新编码为新的 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();
});