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。我假设由于mouseout在mouseover #chartTooltip之前已完成的种族例外，<router-outlet>可以返回变量值为真。

我怎样才能解决这个问题？

Answer 1

为此，我假设#chartToolTip超出.box。而不是标志变量（toolTipHover），只需检查mouseleave事件toElement属性。例如：

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

以下是一个示例：https://jsfiddle.net/qvqafyf2/

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以在函数中添加带有.box的#chartTooltip，如下所示：

$('.box , #chartTooltip').on('mouseover', function()

这里是fiddle

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

2 个答案: