jQuery:检查鼠标是否位于元素上方

Question

我正在处理以下场景:我有一个带有热点的图像 map 。当您将鼠标悬停在 <area> 上时在图像 map 上，显示 <div class="info-panel"> 。此 div 与 <area> 重叠，因此 div 隐藏在 <div class="info-panel"> 的 mouseleave 上。

这在大多数情况下是有效的，但在奇怪的情况下，例如，如果你猛烈地移动鼠标太快，div 就会保持在上面。我认为可能是在小实例中<area>和 <div>相交。我不会担心，只有客户指出它是一个错误。

我认为解决此问题的唯一万无一失的方法是检查鼠标移动是否可见信息窗口。如果是，则检查鼠标当前是否位于其上方 - 如果不是，则将其隐藏。这将确保如果鼠标不在信息窗口上方，信息窗口永远不可见。

我的问题是:如何检查当前鼠标位置是否在信息窗口上方？请记住，这是异常(exception)情况而不是规则，并且我确定不知道信息窗口是否可见？

Answer 1

例如，当您鼠标移出时，计时器会在 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
});