在大型菜单灯箱的代码中将 mouseenter 替换为 hoverintent

Question

我有一个使用 hoverintent 来延迟下拉菜单的大型菜单，我还为菜单设置了灯箱效果，但是代码使用 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();
                });
}       
});