javascript - 如何检查两个元素上的鼠标悬停？

Question

我需要在鼠标移出链接时隐藏工具提示，但如果鼠标悬停在工具提示上则不需要（两者都有不同的父母）例如：当鼠标悬停在名字或头像朋友上时，我们可以在 Facebook 上看到它

我试试这个，但每次我得到 FALSE

$('a').bind('mouseleave', function () {   
      var i = $('div.tooltip').is('hover');
      if(i===true){
      console.log('cursor over the tooltip, so dont hide');
      }
      else{
      console.log('hide tooltip');
      }   
});

我如何检查这两种情况？

Answer 1

将链接和工具提示放在同一个父级中：

<div id="parent">
    <a href="link.com">link</a>
    <div id="tooltip">tooltip</div>
</div>

然后在脚本中，您可以将 mouseleave 函数放在父级上：

$("#parent a").mouseenter(function(){
   $("#tooltip").css("display","block"); //or however you handle this
});
$("#parent").mouseleave(function(){
   $("#tooltip").css("display","none");
});

Answer 2

如果您无法更改标记，请使用定时事件并在鼠标进入任一元素时中止它，如下所示：

var timer;

$("a, .tooltip").mouseleave(function() {
    timer = setTimeout(doSomething, 10);
}).mouseenter(function() {
    clearTimeout(timer);
});

function doSomething() {
    console.log('hide tooltip');
}

这是一个小提琴