jquery - mouseenter/mouseleave 受到嵌套子对象的影响

Question

我正在文档就绪状态下隐藏控制面板 (myNestContainer)。我有一个名为 navMyNest 的按钮，当 mouseenter 发生时，会显示 myNestContainer。这很好用。

问题是我希望用户能够浏览控制面板，但是考虑到 myNestContainer 中有嵌套的 DIV 容器，一旦输入，mouseleave 生效，控制面板关闭。

这比 mouseenter/mouseout 工作得更好，但仍然没有我想要的功能。

关于如何覆盖子对象以便控制面板在用户查看时保持打开状态有什么想法吗？

提前致谢。

$(document).ready(function() {
$("div#myNestContainer").hide();
});

$("div#navMyNest").live("mouseenter", function(event) {
    $("div#myNestContainer").show();
});

$("div#myNestContainer").live("mouseleave", function(event) {
    $("div#myNestContainer").hide();
});

Answer 1

当鼠标移动到嵌套元素时，使用 event.latedTarget 使父元素保持可见。

$('#myNestContainer').mouseout(function(e)
{
    var evt = e || window.event;
    if (evt.relatedTarget != document.getElementById('navMyNest'))
    {
        $("#myNestContainer").hide();
    }
});