我之前做电商项目时也踩过这个坑！你当前的代码只给#cart按钮绑定了hover事件，当鼠标从按钮移到下方的购物车内容区域时，会触发按钮的mouseleave事件，导致购物框直接隐藏，这就出现了还没摸到内容就消失的尴尬情况。

要实现「直到鼠标完全移出购物车相关区域才消失」的效果，有两种靠谱的方案，推荐优先用第一种：

方案1：统一父容器监听hover（最简洁） #

先调整你的HTML结构，把购物车按钮和下拉内容包在同一个父容器里：

<div class="cart-wrapper">
  <button id="cart">我的购物车</button>
  <div class="shopping-cart">
    <!-- 购物车商品列表等内容 -->
  </div>
</div>

然后把hover事件绑定到这个父容器上，这样不管鼠标在按钮还是下拉内容里，都会保持激活状态：

$('.cart-wrapper').hover(
  function() {
    $(".shopping-cart").stop(true, true).addClass("active");
  },
  function() {
    $(".shopping-cart").stop(true, true).removeClass("active");
  }
);

这个方案逻辑最直观，没有延迟，用户体验最好，是我平时首选的方法。

方案2：用定时器延迟隐藏（无需改HTML） #

如果因为某些原因不能调整HTML结构，可以用定时器给鼠标留个“转移时间”，同时在鼠标进入购物车内容时取消隐藏操作：

let cartHideTimer;

// 鼠标进入购物车按钮时，立刻显示下拉框并清除定时器
$('#cart').mouseenter(function() {
  clearTimeout(cartHideTimer);
  $(".shopping-cart").stop(true, true).addClass("active");
});

// 鼠标离开购物车按钮时，延迟200ms再隐藏下拉框
$('#cart').mouseleave(function() {
  cartHideTimer = setTimeout(() => {
    $(".shopping-cart").stop(true, true).removeClass("active");
  }, 200);
});

// 鼠标进入购物车内容时，清除隐藏定时器，保持显示
$(".shopping-cart").mouseenter(function() {
  clearTimeout(cartHideTimer);
});

// 鼠标离开购物车内容时，直接隐藏下拉框
$(".shopping-cart").mouseleave(function() {
  $(".shopping-cart").stop(true, true).removeClass("active");
});

这个方案的关键是用setTimeout给鼠标从按钮移到内容的过程留缓冲时间，200ms是比较合适的数值，既不会让用户觉得延迟，也能覆盖大部分操作的时间差。

内容的提问来源于stack exchange，提问作者Alexd2