交换mouseenter以将鼠标悬停在巨型菜单灯箱的代码中

Question

我有一个使用悬停功能来延迟下拉菜单的大型菜单，我还为菜单设置了灯箱效果，但是代码使用mouseenter和mouseleave，问题是虽然下拉菜单会延迟灯箱效果，因此一旦鼠标经过灯箱就会被触发。 有什么办法可以将下面的代码更改为使用hoverintent而不是mouseenter / mouseleave？

 <script>
        $(document).ready(function() { 
if (document.documentElement.clientWidth > 801) {
            $("#mega-menu").mouseenter(function() {              
                    $("#mm-nav-overlay").toggle();        
                    }).mouseleave(function () {     
            $("#mm-nav-overlay").hide();
                    });
}       
});
</script>   

非常感谢

Answer 1

因此，我最终选择将上面的代码替换为：

    $(document).ready(function() { 
if (document.documentElement.clientWidth > 801) {
        $("#mega-menu").mouseenter(function() {
        timer = setTimeout(function(){
                $("#mm-nav-overlay").toggle();
            },200/* <--- the delay */)  
                }).mouseleave(function () { 
                clearTimeout(timer);
        $("#mm-nav-overlay").hide();
                });
}       
});