Question

我有这个链接：

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

当此链接悬停时，div会在其下方打开一些内容。这很好。现在，我需要一个.mouseout（）事件来关闭打开的div（div的id是gen_details），但是只有光标没有向下移动到div本身。

我编写了一个关闭div的函数（见下面，slideToggle这样做），我只需要修改一个条件，检查光标是否在div的边界内，如果不是则执行代码。< / p>

    $('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;
            }
//}
        });

不应该太复杂但我无法弄清楚如何在没有任何复杂的黑客攻击的情况下做到这一点。

Answer 1

这种事情通常通过一个小的超时来解决，如果鼠标进入某个元素，它就会被清除。类似的东西：

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

FIDDLE

Answer 2

不需要定时器或类似的东西。您只需设置鼠标悬停功能即可同时选择链接和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>

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

2 个答案: