jQuery - 调用函数onmouseout，但仅当光标未移动到某个区域时

jQuery - call function onmouseout but only if the cursor wasn't moved to a certain area

本文关键字：未移动 光标 区域 调用 函数 onmouseout jQuery      更新时间：2023-09-26

我有这个链接：

<a class='itemshow'>Show Details</a>

当将鼠标悬停在此链接上时，在其下方会打开一个div，其中包含一些内容。这工作正常。现在，我需要一个 .mouseout（） 事件来关闭打开的div（div 的 id 是 gen_details），但前提是光标没有向下移动到div 本身。

我写了一个关闭div 的函数（见下文，slideToggle 可以做到），我只需要修改 - 一个条件，检查光标是否在div 的边界内，并且只有在它不在时才执行代码。

    $('a.itemshow').mouseleave(function()
        { 
//if(condition here to check if cursor is out of the div's boundaries){
        if($('#gen_details').hasClass("open")){
            $('#gen_details').slideToggle(300);
            $('#gen_details').removeClass("open");
                return false;
            }
//}
        });

不应该太复杂，但我不知道如何在没有任何复杂的黑客的情况下做到这一点。

这种事情通常通过一个小的超时来解决，如果鼠标进入某个元素，就会清除该超时。像这样：

var timer;
$('a.itemshow, #gen_details').on({
    mouseenter: function() {
        clearTimeout(timer);
        $("#gen_details").slideDown(300);
    },
    mouseleave: function() {
        timer = setTimeout(hideGen, 200);  
    }
});
function hideGen() {
    $("#gen_details").slideUp(300);
}

小提琴

不需要计时器或类似的东西。您只需设置鼠标悬停功能以选择链接和div。因此，如果您将鼠标悬停在包含的div 上，它会执行默认操作并离开div 或链接，然后调用 mouseout 处理程序，不确定您是否理解我的意思。

小提琴：http://jsfiddle.net/avukonke/fcSUH/

<a href="www.twitter.com" class="tester"><img src="https://blog.twitter.com/sites/all/themes/gazebo/img/twitter-bird-white-on-blue.png" /></a>
<div style="width:200px; height: 100px; background-color:black; clear:none;" class="myblock"></div>
相关文章：