javascript - 悬停子元素时，JQuery 在 mouseleave 上重复 mouseenter 事件

Question

以下代码有问题。将鼠标悬停在帮助图标上，然后将鼠标悬停在右侧，事件将多次触发，跨度“橡皮筋”上下移动。关于如何缓解这种情况的建议？

HTML

<div class="help">?<span>Help text.</span></div>

CSS

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 {
    text-align: left;
    position: absolute;
    display: none;
    min-width: 300px;
    top: 0;
    left: 20px;
    font-weight: normal;
    padding: 15px;
    background-color: orange;
    border-radius: 8px;
  }
}

JS (JQuery)

$(document).ready(function() {
  $(".help").mouseenter(function() {
    $(this).find("span").show("fast");
  }).mouseleave(function() {
    $(this).find("span").slideUp("fast");
  });
});

我试过:

$(".help span").mouseenter(function() {
  event.preventDefault();
});

// In mouseenter event:
// event.stopPropagation();

在这里试一试:

https://codepen.io/sorensend/pen/VQZzxO

Answer 1

试试这个:

$(document).ready(function() {
    $(".help").mouseenter(function() {
        $(this).find("span").show("fast");
    }).mouseleave(function() {
        $(this).find("span").slideUp("fast");
    });

    $(".help span").mouseleave(function(event) {
        event.stopPropagation();
    });

    $(".help span").mouseenter(function(event) {
        event.stopPropagation();
    });
});

示例:https://codepen.io/anon/pen/oEvGNK