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();
});