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＃触发器上时，mega菜单会向下滑动。我想做的是当用户的鼠标超出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");
        }); 

});

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

1 个答案: