Jquery 显示和隐藏div时mouseout函数出现问题

我有一个导航项，单击时显示隐藏的div。当鼠标移出div时，我很难让div隐藏。我希望在用户的鼠标离开div的边界时隐藏它。以下是jquery：

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

#locationsSuperNav div内有链接和图像。当光标悬停在这些元素上时，div将隐藏。有什么方法可以防止这种情况吗

提前感谢您的帮助。

当然，请使用事件处理程序而不是鼠标

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

---

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

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

不要在这里使用，像这样：

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

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

与进入儿童时开火不同，不会。从文档中：

mouseleave

事件处理事件冒泡的方式不同于

mouseout

。如果在本例中使用了

mouseout

，那么当鼠标指针移出内部元素时，将触发处理程序。这通常是不受欢迎的行为。另一方面，

mouseleave

事件仅在鼠标离开其绑定到的元素而不是后代时触发其处理程序。因此在本例中，当鼠标离开外部元素而不是内部元素时，将触发处理程序

---

您还可以在处理程序中使用

this

来引用所讨论的元素，无需再次运行选择器，就像我上面所说的那样。

您遇到的问题是，每当光标离开目标元素时（包括在子元素内部移动时），都会触发mouseout事件。jQuery可以通过使用.hover（）函数来帮助您处理此问题：

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

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

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

当您将鼠标悬停在#locationsSuperNav元素中时，这将不起任何作用，当您将鼠标悬停在该元素外时，将执行slideUp（）

---

如果您愿意，还可以为hover in事件填充一些功能。

不需要

.hover（）

这里，它是

.mouseenter（func1.mouseleave（func2）

的快捷方式，如果您只是想直接使用它，而不是附加额外的处理程序：）