jquery - 在悬停和鼠标输入时显示 div，但当鼠标不在目标或 div 上时隐藏

Question

我遇到一个问题，当鼠标悬停在链接上时，它会显示一个 div，然后当鼠标悬停在该 div 上时，它会保持打开状态。

但是，如果我将鼠标悬停在链接上，然后将鼠标移到页面的另一部分(不是 div)上，则 div 在应该关闭时保持打开状态，并且仅当我将鼠标移到上方时触发 mouseleave 事件时才关闭div 然后关闭 div。

谁能帮忙解决这个问题吗？

$(document).ready(function() {
  $(".showProducts").hide();

  $("#Shop").hover(function() {
      $("#productList ").show();
    }),
    $(".showProducts").mouseenter(function() {
      $("#productList ").show();
    });
  $(".showProducts").mouseleave(function() {
    $(" #productList").hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="Shop" name="Shop" class="nav-link" href="/shop/">Shop</a>

<div id="productList" class="container showProducts">productList</div>

Answer 1

我建议为此使用一种称为“去抖动”的技术。基本上它只是引入了一个用于移除可见区域的小计时器。每次鼠标进入其中一个区域时，都会清除计时器。当它离开时，启动它。在计时器结束时，删除内容。

我添加了淡出效果，因为你有额外的时间。 450 毫秒的延迟基于用户的平均鼠标移动。背景颜色只是为了更清楚我们正在查看的内容区域到底在哪里。

$(document).ready(function() {
  $(".showProducts").hide();
  
  var timer;
  function debounce(){
      clearTimeout(timer);
      timer = setTimeout(function(){
          $("#productList").fadeOut('fast');
      },450);
  }
  
  $("#Shop").hover(function() {
      // hover over
      $("#productList").show();
      clearTimeout(timer);
    },function(){
      // hover out
      debounce();
    });
  $(".showProducts").mouseenter(function(){
    clearTimeout(timer);
  });
  $(".showProducts").mouseleave(function(){
    debounce();
  });
});

#Shop{
 background-color: lightgrey;
}

#productList{
 background-color: beige;
 width:50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a id="Shop" name="Shop" class="nav-link" href="/shop/">Shop</a>

<div id="productList" class="container showProducts">productList</div>