Question

I have this block of code. The idea is, that when I mouseover li#anchor, previously hidden ul#seeMore should show up.

jQuery(document).ready(function(){
    jQuery("li#anchor").mouseenter(function() {
        jQuery('ul#seeMore').css("display","block");
    });

    jQuery("li#anchor").mouseleave(function() {
        setTimeout( function(){
            jQuery('ul#seeMore').css("display","none");              
        },1000);
    });
})

The problem is that I also want that the second mouseleave function should not happen if I am still hovering the ul#seeMore

Or, probably the question should be: How can I ascertain if I’m not hovering the ul#seeMore?

I tried to change jQuery("li#anchor").mouseleave(function() { to jQuery("ul#seeMore").mouseleave(function() { but it seems this is not very stable.

Answer 1

You can put ul#seemore inside li#anchor element. This way, when the mouse is up ul#seemore, it will be up the li#anchor element