鼠标悬停和鼠标离开事件jQuery

Question

当用户将鼠标移到图标上时，我正在创建一个DIV菜单。 DIV菜单还有两个子DIV，它们具有onclick事件。 当我将鼠标移到图标上时，菜单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在action menu div内部，但它会消失呢？

- azamsharp

---

可能需要清理代码。$(actionImage)是什么意思？ - j08691

当您将鼠标悬停在图标上时，您希望菜单出现在哪里？您希望菜单随着您在图标上移动鼠标而沿着光标运行吗？ - Selvakumar Arumugam

我刚刚更新了更多细节！ - azamsharp

Answer 1

您正在通过mouseout事件隐藏#actionMenu。

所以发生的情况是，当您在图标内部时，div被显示并且也隐藏了（我假设图标位于#actionMenu之外）。最终，由于您在进入div之前处于外部，因此隐藏了#actionMenu div。

编辑: 以下似乎解决了问题。查看此处的DEMO

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

- Selvakumar Arumugam

---

我尝试使用mouseenter和mouseleave，但IE8无法识别它们。 - azamsharp

@azamsharp 我的演示在IE8中工作了吗？ mouseenter和mouseleave自jQuery 1.0以来就存在。 必须有其他脚本错误。 - Selvakumar Arumugam

看看@ShankarSangoli的答案。那也可以，因为您已经将div定位在图标上方。 - Selvakumar Arumugam

是的，你的代码在IE中可以运行！我会检查一下为什么它对我不起作用。谢谢！ - azamsharp

Answer 2

这种情况发生是因为当您将鼠标悬停在菜单项上以进行 点击 时，菜单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');

    });  

- ShankarSangoli

---

我尝试使用mouseenter，但它显示对象未找到。它无法识别mouseenter事件。我正在使用jQuery 1.7和IE 8。 - azamsharp