JQuery鼠标悬停子元素时mouseenter事件重复触发问题求助

这个问题本质是鼠标在图标和提示框之间移动时，触发了不必要的事件循环：当你把鼠标从蓝色图标移到右侧的橙色提示框时，鼠标短暂离开了.help元素的范围（因为提示框是绝对定位在图标外部的），所以触发了mouseleave开始收起提示框；但同时鼠标又进入了提示框（它是.help的子元素），这又会触发父元素的mouseenter，重新显示提示框——如此反复就造成了“橡皮筋”一样的跳动效果。

另外先提个小问题：你的JS代码里选择器写错了，应该是$(".help")而不是$("help")，后者会寻找<help>标签，无法正确绑定事件。

下面给你两种解决方案，优先推荐纯CSS方案：

方案一：纯CSS实现（推荐，无JS事件冲突） #

用CSS的:hover状态控制提示框显示，因为当鼠标悬停在子元素上时，父元素的:hover状态会持续保持，从根源上避免事件循环问题，代码也更简洁：

div.help {
  position: relative;
  margin-right: 8px;
  bottom: 1px;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 14px;
  display: inline-block;
  text-align: center;
  line-height: 14px;
  width: 16px;
  height: 16px;
  color: white;
  font-weight: bold;
  background-color: blue;
  border-radius: 8px;
  transition: all 0.25s ease;
  z-index: 5;

  &:hover {
    background-color: orange;
    // 鼠标悬停父元素时，显示提示框
    > span {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
  }

  > span {
    text-align: left;
    position: absolute;
    // 用opacity+visibility替代display，支持过渡动画
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px); // 增加位移动画提升体验
    transition: all 0.25s ease;
    min-width: 300px;
    top: 0;
    left: 20px;
    font-weight: normal;
    padding: 15px;
    background-color: orange;
    border-radius: 8px;
  }
}

这样修改后，你可以去掉原来的JS代码，完全用CSS实现悬停显示效果，不会再出现跳动问题。

方案二：修复JS事件逻辑 #

如果必须保留JS实现，需要在mouseleave事件中判断鼠标是否进入了提示框内部，只有当鼠标真正离开整个.help元素时才收起提示框：

$(document).ready(function() {
  $(".help").mouseenter(function() {
    $(this).find("span").show("fast");
  }).mouseleave(function(event) {
    // 获取鼠标离开后进入的元素
    const $relatedTarget = $(event.relatedTarget);
    // 如果该元素不是.help的后代，才执行收起操作
    if (!$relatedTarget.closest(".help").length) {
      $(this).find("span").slideUp("fast");
    }
  });
});

这里用到了event.relatedTarget来获取鼠标离开当前元素后进入的下一个元素，再通过closest(".help")判断它是否属于.help的后代——如果是提示框，就不执行收起，避免事件循环。

你之前尝试的event.preventDefault()和stopPropagation()没用，因为问题的核心不是事件冒泡，而是鼠标在父元素和子元素之间切换时触发的重复事件。

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