jquery - 鼠标悬停和鼠标移出事件 jQuery

Question

当用户将鼠标悬停在图标上时，我正在创建 DIV 菜单。 div 菜单还有两个具有 onclick 事件的子 div。当我将鼠标悬停在图标上时，菜单 div 会出现，但当我要选择子 div 时，主菜单 div 会隐藏。

     <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');

    });     

更新 1:

我有一个填充了数据的表。其中一列是一个图标 (actionImage)。当我将鼠标悬停在图标上时，我想显示 div 菜单(完成)。 div 菜单有两个子 div(添加和删除)。现在，当我将鼠标悬停在子 div 上时，主 div (actionMenu) 就会消失。既然子 div 位于操作菜单 div 内，为什么它会消失？

Answer 1

您在鼠标移开时隐藏了#actionMenu。

所以发生的事情是，当您位于图标内部时，div 会显示并隐藏(我假设图标位于#actionMenu 之外)。最后，#actionMenu div 被隐藏，因为您在进入 div 之前就在外面。

编辑:下面似乎可以解决问题。请参阅DEMO这里

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