Question

我有一个导航项目，点击后会显示一个隐藏的div。当你用鼠标输出div时，我很难让div隐藏起来。当用户的鼠标离开div的边界时，我希望它隐藏起来。这是jquery：

$(document).ready(function () {
    $('li#locations a').click( 
        function(){ 
            $('#locationsSuperNav').slideDown(); 
        }
    ); 
    $('#locationsSuperNav').mouseout( 
        function(){ 
            $('#locationsSuperNav').slideUp(); 
        }
    );
});

#locationsSuperNav div中有链接和图像。当光标悬停在这些元素上时，div将隐藏。有什么方法可以阻止这个吗？

提前感谢您的帮助。

Answer 1

当然，使用mouseleave事件处理程序而不是mouseout。

$('#locationsSuperNav').mouseleave( 
    function(){ 
        $('#locationsSuperNav').slideUp(); 
    }
);

Answer 2

而不是.mouseout()在这里使用.mouseleave()，如下所示：

$('#locationsSuperNav').mouseleave(function(){ 
  $(this).slideUp(); 
});

与发送的mouseout不同，即使在进入儿童时，mouseleave也不会。来自文档：

mouseleave事件处理事件冒泡的方式与mouseout不同。如果在此示例中使用mouseout，则当鼠标指针移出内部元素时，将触发处理程序。这通常是不受欢迎的行为。另一方面，mouseleave事件仅在鼠标离开绑定的元素而不是后代时触发其处理程序。因此，在此示例中，当鼠标离开外部元素而不是内部元素时，将触发处理程序。

你也可以在处理程序中使用this来引用有问题的元素，不需要像我上面那样再次运行选择器。

Answer 3

尝试使用mouseleave而不是mouseout，我没有检查，但它可能有用......

$(document).ready(function () {
$('li#locations a').click( 
    function(){ 
        $('#locationsSuperNav').slideDown(); 
    }
); 
$('#locationsSuperNav').mouseleave( 
    function(){ 
        $('#locationsSuperNav').slideUp(); 
    }
);});

Answer 4

您遇到的问题是每当光标离开目标元素时都会触发mouseout事件 - 包括当它移动到子元素内部时。 jQuery可以通过使用.hover（）函数来帮助您解决这个问题：http://api.jquery.com/hover/

这将允许您将事件绑定到鼠标进入元素或其子元素时，以及当它离开元素的包含区域时，将子项作为该区域的一部分包含在内。所以你可能会这样做：

$(function () {
    $('li#locations a').click( 
        function(){ 
            $('#locationsSuperNav').slideDown(); 
        }
    ); 
    $('#locationsSuperNav').hover(function() {},  
        function(){ 
            $('#locationsSuperNav').slideUp(); 
        }
    );
});

当您将鼠标悬停在#locationsSuperNav元素中时，这将无效，并在您将鼠标悬停在其上时执行slideUp（）。

如果您愿意，还可以为事件中的悬停填写一些功能。

显示和隐藏div时鼠标输出功能出现问题

4 个答案: