Question

我一直在使用委托让悬停效果在嵌套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

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

鼠标输入.shadow
.cover和.hover
由于显示.shadow鼠标离开.hover
.cover和.hover隐藏
（GoTo 1.除非鼠标不再超过三个中的任何一个）

如果您改为使用mouseenter / mouseleave并使cover和hover子项为shadow，则不会出现此问题。

Answer 2

重新编码到新的jQuery方法（.onmouseover，.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();
});

委托闪烁循环

2 个答案: