How to determine which element is actually being hovered

Question

I do not know a lot of JS. Although I already did my own search, but I could not find out answers. So I am asking here and hope you can help me out.

I am trying to create a navigation menu based on div tag (like http://www.adobe.com/), and using jQuery to make a function for "appear/disapper when hover".

Simple Div Structure:

<div id='menu'>
    <div> Level 1 a
            <div> Level 2 a </div> 
            <div> Level 2 b </div> 
    </div>
    <div> Level 1 b
            <div> Level 2 c </div> 
            <div> Level 2 d </div> 
    </div>
</div>

I understand that it will need to use $('#menu').hover() function. My question is, if only use one id "menu", how or what kind of function I can use to determine which actual menu list is being hovered??

Like:

$("#menu").hover(                        // Div Menu is being hovered
    function () {
        // $el = Determine which menu inside of Div Menu is actually being hovered
        // $el.show();
    },
    function () {
        $el..hide();
    }
);

Or maybe my structure is completely wrong, Should use another method to do this? Please help.

Answer 1

Actually, there is no hover event. There are many different mouse events in two different models, and they are different in getting triggered from inner elements. Luckily, jQuery's hover method (actually mouseenter and mouseleave) abstracts over this and fires the handlers only when the parent element is hovered.

This means you have to bind the handler to every single element in the menu tree:

$("#menu div").hover(
    function (event) {
        console.log(event);
        $(this).children().show();
    },
    function (event) {
        $(this).children().hide();
    }
);

Demo at jsfiddle.net