jquery - 单击时显示，但鼠标移出时隐藏 - 不起作用？

Question

我几乎解决了这个问题，但遇到了瓶颈。

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

这里有一个 fiddle 来理解我的意思: http://jsfiddle.net/nWxdR/25/

单击“关于”以显示蓝色 div。然后，当您将鼠标从文字上移开后，蓝色的 div 就消失了。我希望蓝色 div 保持不变，直到您滚出整个 <li> - 不是链接。

(注意:主链接和子链接之间的间隙应该在那里——那里会有背景图片。)

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

Answer 1

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

Jsfiddle

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

来自 jQuery 的文档 -

The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse leaves the Outer element, but not the Inner element.