Question

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

我试试这个，但每次我都错了

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

Here's a FIDDLE

如何在两个元素上检查鼠标悬停？

2 个答案: