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

我正在尝试为悬停在图标上的工具提示：

<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');
    }

最佳答案

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