当鼠标距离该 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 边界外 50px 时让#megaMenu 向上滑动。有什么建议么？？

这是我使用的核心 jQuery：

$(document).ready(function () {

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

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

});

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

Answer 1

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

$(document).ready(function(){

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

});