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

【问题标题】：Display div on hover and mouseenter but hide when mouse is not on target or div在鼠标悬停和鼠标输入时显示 div，但当鼠标不在目标或 div 上时隐藏
【发布时间】：2018-11-01 06:36:41
【问题描述】：

我有一个问题，当悬停在链接上时会显示一个 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>

【问题讨论】：

标签： jquery html

【解决方案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>

【讨论】：

感谢 Travis 成功了，从来没有听说过一种叫做“去抖动”的技术

【解决方案2】：

纯CSS 解决方案怎么样？这个使用next (+)选择器...

a,
div {
  border: 1px solid red;
}

.showProducts {
  display: none;
}

#Shop:hover+div.showProducts {
  display: block;
}

div.showProducts:hover {
  display: block;
}

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

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

【讨论】：

【解决方案3】：

你不需要 jQuery - CSS 可以用兄弟组合符来做（你可以使用直接兄弟组合符 (+) 来定位下一个元素或通用兄弟组合符 (~) 如果你有多个兄弟姐妹元素。

#productList {display: none}
#Shop:hover + #productList {display: block}
#productList:hover {display: block}

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

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

【讨论】：

【解决方案4】：

我想我明白你想要做什么。解决该问题的方法是监听链接上的悬停事件和鼠标离开事件。悬停事件将确保当鼠标移过链接时显示 div，然后鼠标离开事件将确保当鼠标离开链接时 div 消失，但当然你也会同时听div 本身的悬停事件和鼠标离开事件，悬停事件将确保 div 仍在显示，而鼠标离开事件将确保 div 在鼠标离开后消失。

//add this to the original code
$("#Shop").mouseleave(function () {
        $("#productList ").hide();
}),

【讨论】：