Jquery 当鼠标与div保持一定距离时隐藏div

我在一个页面上有一个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>

---

第二段代码（.superNavClose）试图在菜单周围放置一个热点，以便在用户鼠标点击时关闭它。在mega菜单中有很多链接，所以我需要在用户使用它时保持它的打开状态。我在想，当鼠标离开一定距离时关闭div会很好。提前感谢您的建议

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

$(document).ready(function(){

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

});

---

为什么不在megaMenu周围使用填充呢。它很简单，可以满足您的需要。我们遇到的是用户离开div的速度。如果他们的鼠标快速离开，div将保持打开状态。需要有一个完整的证据来关闭它。

$(document).ready(function(){

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

});