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

您在mouseout上隐藏了＃actionMenu。

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

编辑：下面似乎解决了这个问题。请参阅DEMO此处

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

Answer 2

发生这种情况是因为当您将鼠标悬停在菜单项click上时，菜单div上的mouseout事件以及菜单项上的mouseover事件也被触发，因此菜单div隐藏。使用mouseenter和mouseleave事件组合可以解决此问题。

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

    });

mouseover和mouseout事件jQuery

2 个答案: