我几乎遇到了这个问题，但已经碰壁了。
我有一个主导航列表，它在悬停时显示下拉内容，然后当您单击父链接时，它需要显示一个新的内容 div 来代替原始下拉列表。我有那个工作。但是，当您将鼠标移出 parent 时，我需要新的 div 消失<li>。这就是问题开始的地方。无论我做什么，当您从链接中鼠标移出时，它似乎都在起作用，而不是<li>.
这是一个小提琴，看看我的意思：http: //jsfiddle.net/nWxdR/25/
单击“关于”以显示蓝色 div。然后，在您将鼠标从单词上移开后，您将失去蓝色 div。我希望蓝色 div 一直保留到您退出整个页面<li>- 而不是链接。
（注意：主链接和子链接之间的间隙应该在那里——那里会有一个背景图像。）
我很感激任何帮助。谢谢！
使用 jQuery 的mouseleave事件而不是 mouseout。
$(".about").mouseleave(function() {
$("#about-text").hide();
});
来自 jQuery 的文档 -
mouseleave 事件与 mouseout 处理事件冒泡的方式不同。如果在此示例中使用 mouseout，则当鼠标指针移出 Inner 元素时，将触发处理程序。这通常是不受欢迎的行为。另一方面，mouseleave 事件仅在鼠标离开它所绑定的元素而不是后代元素时触发其处理程序。所以在这个例子中，当鼠标离开外部元素而不是内部元素时触发处理程序。
slidetoggle()将在鼠标移出时再次为鼠标移动的文本设置动画。将此更改.show()为您选择的动画或动画显示。将此与上面给出的答案结合起来。