jQuery:检查鼠标是否在元素上

Question

我正在使用以下场景:我有一个带热点的图像映射.当您将鼠标悬停<area>在图像地图上时,会显示一个<div class="info-panel">.这个div重叠<area>,所以div隐藏在mouseleave上<div class="info-panel">.

这主要是有效的,但在奇怪的情况下,例如,如果你去弹道并且移动鼠标太快,div就会保持不变.我认为它可能是在小<area>和实际<div>相交的情况下.我不担心,只有客户指出它是一个错误.

我能想到解决这个问题的唯一万无一失的方法是,如果信息窗口可见,请检查鼠标移动.如果是,那么检查鼠标当前是否在它上面 - 如果不是,则隐藏它.这将确保如果鼠标悬停在信息窗口上,则信息窗口永远不可见.

我的问题是:如何检查当前鼠标位置是否在信息窗口上？请记住,这是异常而不是规则,我不确定信息窗口是否可见？

Answer 1

例如,当mouseout有一个在1秒后运行的计时器时,它将关闭所有窗口.

鼠标悬停时一定要删除该计时器...所以只有鼠标输出才能设置计时器.

就像是:

var timer; 
$(".window").mouseout(function(){
    $(".window").hide(); // regular hide

    // run the same thing after 1 second
    // to catch windows that are still open
    timer = setTimeout(function(){
        $(".window").hide(); // regular hide
    }, 1000); // 1 second
});

// be sure to remove the timer when you mouseover
$(".window").mouseover(function(){
    clearTimeout(timer);

    // other stuff
});