0

我有这个链接：

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

不应该太复杂，但如果没有任何复杂的黑客，我无法弄清楚如何做到这一点。

4

2 回答 2

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

​<a href="http://jsfiddle.net/vuqjy/" rel="nofollow">FIDDLE

于 2012-06-23T12:03:20.820 回答
0

不需要计时器或类似的东西。您只需将鼠标悬停功能设置为同时选择链接和 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>
于 2013-10-11T10:41:10.363 回答