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();
                });
}       
});

在巨型菜单灯箱的代码中交换hoverintent的mouseenter

1 个答案: