Swap mouseenter for hoverintent in code for mega menu lightbox

Question

I have a mega menu that uses the hoverintent to delay the drop down, I have also set up a lightbox effect for the menu, however the code uses mouseenter and mouseleave, the problem is that whilst the drop down has a delay the lightbox effect doent, so as soon as the mouse passes over the lightbox is triggered. Is there any way that the code below can be changed to use hoverintent instead of 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>   

Many Thanks

Answer 1

So I opted in the end to replace the code above with:

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