Buggy jQuery悬停菜单

Question

I got tasked with fixing a buggy dropdown menu that reacts on hover. When I move the mouse from the button that should trigger the dropdown to the dropdown it sometimes closes the dropdown. I feel like it triggers the leave-event when I leave the button even though I'm not leaving the wrapper.

The html is something like this:

<div id="shopcart_wrapper">
    <div class="hover_here">Shopcart</div>
    <div id="shopcartsummary" class="closed">
        Shopcartstuff here
    </div>
</div>

Javascript is like this:

shopcartShowMouseEnter: function () {
    $('#shopcart_wrapper').on('mouseenter', function(){
        if(Modernizr.cssanimations){
            $('#shopcartsummary').addClass('open').removeClass('closed');
        }else{
            if(!$('#shopcartsummary').is(':animated')){
                eStore.shopcart.show();
            }
        }
    });
},
shopcartHideMouseLeave: function(){
    $('#shopcart_wrapper').on('mouseleave', function(){
        if(Modernizr.cssanimations){
            $('#shopcartsummary').removeClass('open').addClass('closed');
        }else{
            if(!$('#shopcartsummary').is(':animated')){
                eStore.shopcart.hide();
            }
        }
    });
}

I feel like the fix should be to check if I'm still hovering over the #shopcartsummary before I trigger any events in the mouseleave. But how do I do this in the best way?

Answer 1

I think the solution I was after is this:

shopcartHideMouseLeave: function(){
    if(!$('#shopcartsummary').is(':hover')){
        $('#shopcart_wrapper').on('mouseleave', function(){
            if(Modernizr.cssanimations){
                $('#shopcartsummary').removeClass('open').addClass('closed');
            }else{
                if(!$('#shopcartsummary').is(':animated')){
                    eStore.shopcart.hide();
                }
            }
        });
    }
}