JQuery hover fadeIn/fadeOut on different divs

Question

I have lists inside a div called header which I want to expand the lists on hover over each list, but I want all the lists which have been hovered over to stay open until the mouse is moved out of the header div. So far I have fadeIn/fadeOut for each list individually or I can get each list to fadeIn and stay open but not fadeOut whenever I move out of the div.

here is the code that I am using: http://jsfiddle.net/jTCdg/11/

The line commented out in the javascript is what changes between all the lists staying visible or the list fadeIn/fadeOut on hover.

This is my first time using javascript so help would be greatly appreciated. thanks

Answer 1

jQuery hover is a shortcut for the mouseenter and mouseleave event handlers. You can define both separately.

$(document).ready(function() {
    $("#header ul").mouseenter(function() {
        $(this).find("li").fadeIn();
    });
    $("#header").mouseleave (function() {
        $(this).find("li").fadeOut();
    });
});

Also see the updated jsfiddle .