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

Answer 2

我不得不诉诸很多丑陋的黑客才能让这种事情发挥作用。这也是特定于浏览器的黑客攻击。就我而言，我的嵌套元素中有 iframe 元素。

我必须使用延迟/超时，获取鼠标的 (x,y) 位置，并响应 mousemove 事件。

基本上，您必须定期检查，直到鼠标位于边界区域之外，然后删除元素。

我使用淡出效果来删除元素，以使延迟时间更加不明显。

将鼠标悬停在右上角的 Facebook“f”图标即可查看其实际效果：http://www2.highpoint.edu/< /a>

Answer 3

您可以使用jquery悬停功能来解决这个问题...

http://api.jquery.com/hover/< /a>

它基本上解决了您当前面临的问题。使用下面的代码

 $("div#myNestContainer").hover( 

    function () {
     $("div#myNestContainer").show(); 
    },

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