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

我正在处理以下情形：我有一个带有热点的图像映射。当您将鼠标悬停在图像地图上的<area>上时，显示<div class="info-panel">。该div与<area>重叠，所以div隐藏在<div class="info-panel">的鼠标叶片上。jQuery：检查鼠标是否在元素上

这很适合，但在奇怪的情况下，例如，如果您发射弹道并且移动鼠标太快，则div保持不变。我认为它可能在<area>和<div>相交的小型实例中。我不会担心，只有客户指出它是一个错误。

我认为解决这个问题的唯一方法就是在信息窗口可见的情况下检查鼠标移动。如果是，则检查鼠标是否正在覆盖它 - 如果不是，则隐藏它。这将确保如果鼠标不在其上，则信息窗口永远不可见。

我的问题是：如何检查当前鼠标位置是否在信息窗口之上？请记住，这是针对例外情况而非规则，并且我确实不知道信息窗口是否可见？

来源

2010-07-08 pingu

当你的鼠标有1秒后运行的计时器，例如，关闭所有窗口。

当你的鼠标悬停时，一定要删除该定时器...所以定时器只有当你mouseout设置。

喜欢的东西：

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 
});

来源

2010-07-08 12:49:01

啊哈！我认为这将起作用，现在将实施......谢谢！ – pingu 2010-07-08 12:52:13

而不是mouseover尝试mouseenter和mouseleave作为事件处理程序。

来源

2010-07-08 12:47:48 jAndy

我使用鼠标悬停的区域，鼠标离开了div ...在这个区域使用mouseenter在这里不会有什么不同。 – pingu 2010-07-08 12:48:58

试试这个：

function show_info (thelink,info_panel) { 
    var timer; 
    timer = setTimeout(function(){ 
     $(info_panel).stop(true, true).fadeIn('normal'); 
    }, 300); 
    $(thelink).mouseout(function(){ clearTimeout(timer); }); 
} 

function hide_info (resim) { 
    $(info_panel).stop(true, true).fadeOut('normal'); 
}

和HTML代码应该是：

<a href="#" id="thelink" onmouseover="show_tipbox('#thelink','#info_panel');">The link</a> 
<div id="info_panel" onmouseout="hide_tipbox('#info_panel');">Info Panel Content</div>

来源

2012-02-02 04:55:55

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

回答

相关问题