在悬停不同元素时显示div，如果鼠标指针移出刚才显示的div，则将其关闭

Question

我正在尝试创建一个巨型菜单，我想在菜单的特定声音悬停时显示它。一旦显示了mega菜单( div )，我想让鼠标(指针)停留在它上面，并在指针移出div时关闭它。

这是我的菜单：

​

​

这是我的菜单，当你点击“项目”链接时，它就会被打开：

​

​

目前，我可以在“项目”链接上显示菜单，但我不知道如何在将鼠标移出超级菜单(div)时关闭它。

下面是显示菜单的代码：

jQuery(document).ready(function(){
    jQuery("#menu-item-15").hover(
        function(){
            jQuery("#mega-menu-projects").show();
        }
    );
});

Answer 1

你可以使用鼠标悬停

jQuery(document).ready(function(){
    jQuery("#menu-item-15").mouseover(
        function(){
            jQuery("#mega-menu-projects").show();
        }
    );

    jQuery("#menu-item-15").mouseout(
        function(){
            jQuery("#mega-menu-projects").hide();
        }
    );
});

https://api.jquery.com/mouseover/

Answer 2

尝试这个(未测试)

jQuery(document).ready(function(){
    jQuery( "#menu-item-15" ).mouseout(function() {
        jQuery("#mega-menu-projects").hide();
    })
    .mouseover(function() {
        jQuery("#mega-menu-projects").show();
    });
});

希望能对你有所帮助