javascript - 当我将鼠标焦点放在元素上时，mouseenter 和 mouseleave 会继续触发

Question

我正在尝试为鼠标悬停在图标上制作工具提示:

<div class="question-description-tooltip" style="display:inline-block;">
    <img class="question-icon" src="icon.png" />
    <span class="question-description-tooltip-text">Description</span>
</div>

$('.question-icon').on({
   mouseenter: function (event) {
       showTooltip(event,this);           
   },
   mouseleave: function () {
       $('.question-description-tooltip-text').css('visibility','hidden');
   }
 });

因此，当我将鼠标悬停在图标上时，mouseenter 和 mouseleave 事件不断触发，因此工具提示在闪烁，我不知道为什么。

元素的CSS:

.question-description-tooltip .question-description-tooltip-text {
  background-color: #4c4c4c;
  visibility: hidden;
  white-space: pre-wrap;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  /*Position the tooltip*/
  position: absolute;
  z-index: 1;
  padding: 7px;
}

显示工具提示函数:

    showTooltip(e, ui){
       //calculate margins so I reposition tooltip it is above icon,
       because description always has differen width and height
       var descriptionTooltip = $(ui).parent().find('.question-description-tooltip-text');
       descriptionTooltip.css("margin-left", -marginLeft);
       descriptionTooltip.css("margin-top", -marginTop);
       $(ui).parent().find('.question-description-tooltip-text').css('visibility', 'visible');
    }

Answer 1

改用 mouseover() 和 mouseout() https://api.jquery.com/category/events/mouse-events/