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.relatedTarget保持父元素可见。

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

Answer 2

你可以使用jquery悬停功能来克服这个问题......

http://api.jquery.com/hover/

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

 $("div#myNestContainer").hover( 

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

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

Answer 3

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

我不得不使用延迟/超时，获取鼠标的（x，y）位置，并响应mousemove事件。

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

我使用了淡出效果去除元素，使延迟时间更加难以察觉。

通过在右上角悬停Facebook“f”图标来查看操作：http://www2.highpoint.edu/

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

3 个答案: