javascript - 使用 jQuery 检查下一个悬停项目

Question

我有以下代码来检测用户是否将鼠标悬停在框上:

var toolTipHover = false;
$('#chartTooltip').on('mouseover', function () {
    toolTipHover = true;
}).on('mouseout', function () {
    toolTipHover = false;
});

$('.box').on('mouseover', function () {
  $('#chartTooltip').show();
}).on('mouseout', function () {
  console.log(toolTipHover);
  if (!toolTipHover) {
      $('#chartTooltip').hide();
  }
  toolTipHover = false;
});

如果是，则显示 #chartTooltip 元素。 (工具提示通过其他方式定位和填充。)

但是，如果用户将鼠标悬停在工具提示本身上，则会导致工具提示消失(因为他们不再将鼠标悬停在框上)。所以我试图检查工具提示是否悬停(即下一个元素悬停)。如果是这样，则忽略 mouseout 事件。

但是 toolTipHover 始终为 false。我推测是由于竞争异常，在 #chartTooltip 的 mouseover 可以返回 true 变量值之前，mouseout 已完成。

我该如何解决这个问题？

Answer 1

为此，我假设 #chartToolTip 位于 .box 之外。只需检查 mouseleave 事件 toElement 属性，而不是使用标志变量 (toolTipHover)。例如:

$('.box').on('mouseleave', function(e){
  if (!$(e.toElement).is('.tooltip')){
    $('.tooltip').hide();
  }
})

这是一个示例:https://jsfiddle.net/qvqafyf2/

$('.tooltip').hide();

$('.box').on('mouseover', function(e){
$('.tooltip').show();
})

$('.box').on('mouseleave', function(e){
  if (!$(e.toElement).is('.tooltip')){
  	$('.tooltip').hide();
  }
})

$('.tooltip').on('mouseleave', function(e){
	if (!$(e.toElement).is('.box')){
  	$(this).hide();
  }
})

.box{
  width: 200px;
  height: 200px;
  background: red;
}

.tooltip{
  height: 50px;
  width: 50px;
  background: green;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
</div>

 <div class="tooltip">
  hi
 </div>