单击显示，但在鼠标移动时隐藏 - 不工作？

Question

我已经遇到了这个问题，但已经碰壁了。

我有一个主导航列表，显示悬停时的下拉内容，然后当您单击父链接时，它需要显示一个新的内容div代替原始下拉列表。我有这个工作。但是，当你鼠标移出父<li>时，我需要新的div消失。这是问题开始的地方。无论我做什么，当你从链接鼠标输出而不是<li>时，它似乎都在起作用。

这是一个小提琴，看看我的意思： http://jsfiddle.net/nWxdR/25/

点击＆＃34;关于＆＃34;显示蓝色div。然后在你滚动鼠标后，你失去了蓝色div。我希望蓝色div保持不变，直到你滚动整个<li> - 而不是链接。

（注意：主要链接和子链接之间的差距应该在那里 - 那里将成为背景图像。）

我很感激任何帮助。谢谢！

Answer 1

使用jQuery的mouseleave事件而不是mouseout。

Jsfiddle

$(".about").mouseleave(function() { 
    $("#about-text").hide();
}); 

来自jQuery的文档 -

  

mouseleave事件与mouseout处理事件的方式不同   冒泡。如果在这个例子中使用mouseout，那么当鼠标   指针移出Inner元素，处理程序就是   触发。这通常是不受欢迎的行为。 mouseleave事件，   另一方面，只有当鼠标离开时才触发其处理程序   它被绑定的元素，而不是后代。所以在这个例子中，   当鼠标离开外部元素时触发处理程序，但不是   内在元素。

Answer 2

slidetoggle()会在鼠标移出时为鼠标上的文本设置动画。将其更改为.show()或您选择的动画显示。将此与上面给出的答案结合起来。