当鼠标距离一个div一定距离时隐藏该div

Question

我在页面上有一个div，它由导航栏中的一个项目切换。我想做的是当用户的鼠标离开该div的外边界一定距离时，将该div隐藏。

这里是一些示例代码：

<ul>
    <li>This is link A</li>
    <li>This is link C</li>
    <li id="trigger">This is link D</li>
</ul>

<div id="megaMenu">This is where the menu content goes</div>

所以，当用户将鼠标悬停在li#trigger上时，超级菜单会滑下来。我想做的是当用户的鼠标在div范围外50像素处时，#megaMenu也会向上滑动。有什么建议吗？

以下是我使用的核心jQuery代码：

$(document).ready(function () {

    $('li#locations a').hover(function () {
        $('#locationsSuperNav').slideDown();
    });

    $('.superNavClose').hover(function () {
        $('#locationsSuperNav').slideUp('fast').removeClass("open");
    });

});

第二段代码(.superNavClose)试图在菜单周围放置热区，以便当用户的鼠标碰触时关闭它。由于超级菜单中有许多链接，所以需要在用户使用菜单时保持其打开状态。我认为当鼠标离开一定距离时关闭div会很好用。感谢您提前的任何建议！

- Mike Muller

---

为什么你不在megaMenu周围使用padding呢？这很简单，可以满足你的需求。 - Lex

我们遇到的问题是用户离开div的速度太快了，如果他们的鼠标迅速离开，div将保持打开状态。需要有一种完美的方法来关闭它。 - Mike Muller

Answer 1

你可以使用hover函数中的handlerOut回调。

$(document).ready(function(){

    $('li#locations a').hover(function(){   
        $('#locationsSuperNav').slideDown();
        }, function(){
            $('#locationsSuperNav').slideUp('fast').removeClass("open");
        }); 

});

- Mark