Question

Im sure this has been asked but I have not located it.

I have li items acting as parents of child sub menu divs.

On parent li hover, the child div shows. But when I blur the parent, the child div hides.

How can I make it so that the child div will remain visible as long as the mouse cursor is over the child div, once the cursor leaves the div, the div will hide.

My code so far is as follows:

$(document).ready(function(){
    $(".menuSection").hover(function(){
        $(this).children(".subMenuWrap").fadeIn(100);
    });
    $(".subMenuWrap").blur(function(){
        $(this).fadeOut(100);
    });
});

As of now, the fadeIn works fine, they just dont dissapear on blur.
Any help is appreciated!

Answer 1

Hover and blur refer to different things. Hover refers to the location of the mouse (mouseenter, mouseleave) and blur means the element lost focus. You can give hover two functions, the first will be run when the user moves the mouse into the area, the second will be run when the mouse leaves:

$(document).ready(function(){
    $(".menuSection").hover(function(){
        $(this).children(".subMenuWrap").fadeIn(100);
    },function(){
        $(this).children(".subMenuWrap").fadeOut(100);
    });
});