Question

我正在使用以下方案：我有一个带热点的图像地图。将鼠标悬停在图片地图上的<area>上时，会显示<div class="info-panel">。此div与<area>重叠，因此div隐藏在<div class="info-panel">的mouseleave上。

这大部分都有效，但在奇怪的情况下，例如如果你去弹道并且将鼠标移动太快，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
});

Answer 2

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

Answer 3

试试这个：

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>

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

3 个答案: