mouseover and mouseout events jQuery

Question

I am creating a DIV menu when the user mouseover an icon. The div menu also has two child divs which have onclick events. When I mouse over the icon the menu div appears but when I am about to select the child divs the main menu div hides.

     <div id="actionMenu" style="display:none;width:40px;height:30px;background-color:white;z-index:9">
            <div id="addRowDiv">Add</div           >
            <div id="deleteRowDiv">Delete</div>
        </div>

$(actionImage).mouseover(function(e) {

        // get the coordinates
        var x = e.pageX - 40;
        var y = e.pageY - 10;

        $("#actionMenu").css({

            position:"absolute",
            top: y + "px",
            left: x + "px"
        });   


        $("#actionMenu").attr("rowId", $(td).parent().attr("id"));

        $("#actionMenu").show();
    });

$("#actionMenu").mouseout(function() {

        $(this).hide();

    });


    $("#actionMenu").find("#addRowDiv").click(function() {

        alert('add row clicked');

    });     

UPDATE 1:

I have a table which is populated with data. One of the columns is an icon (actionImage). When I hover over the icon I want to display the div menu (done). The div menu has two child divs (add and delete). Now, when I hover over the child divs the main div (actionMenu) disappears. Why does it disappear since the child divs are inside the action menu div?

Answer 1

You are hiding the #actionMenu on mouseout.

So What is happening is, when you are inside the icon, the div is shown and also hides (I assume the icon is positioned outside #actionMenu). And In the end the #actionMenu div is hidden since you are outside before entering the div.

Edit: Below seems to solve the problem. See DEMO here

$("#actionMenu").mouseenter(function() {
    $(this).show();
}).mouseleave(function() {
    $(this).hide();
});

Answer 2

It happens because when you mouseover on the menu item to click, mouseout event is also fired on the menu div along with mouseover event on the menu item so the menu div hides. Use mouseenter and mouseleave event combination it will solve this issue.

$(actionImage).mouseenter(function(e) {

        // get the coordinates
        var x = e.pageX - 40;
        var y = e.pageY - 10;

        $("#actionMenu").css({

            position:"absolute",
            top: y + "px",
            left: x + "px"
        });   


        $("#actionMenu").attr("rowId", $(td).parent().attr("id"));

        $("#actionMenu").show();
    });

$("#actionMenu").mouseleave(function() {

        $(this).hide();

    });


    $("#actionMenu").find("#addRowDiv").click(function() {

        alert('add row clicked');

    });