需要帮助的JQuery的鼠标悬停菜单与子菜单

Question

我有这个菜单（@ jsFiddle），其中会出现这种情况给出下面的鼠标事件：

1. 悬停在Movies
2. 然后开始拖动鼠标鼠标悬停在Movie library
3. 拖动时不小心触摸Home菜单项
4. 导致Home子菜单出现并隐藏Movies子菜单。

这不是我想要的效果。所以即时寻求一些援助。我该如何解决这个问题，如果即时通讯拖动我的鼠标，我不小心触摸了一些其他菜单选项，JavaScript将足够聪明，知道它不应该隐藏所选的子菜单。

我可以在悬停上添加某种延迟吗？所有帮助表示赞赏！

Answer 1

您可以使用hoverIntent到mousein油门/ mouseouts事件，以防止燃烧的意外（你需要这个，我认为...）。检查hiverIntent网站上的示例。你会喜欢的。

Answer 2

我觉得这个插件完全适合你想要做什么：http://cherne.net/brian/resources/jquery.hoverIntent.html

Answer 3

我希望这是你想要的。如果没有，我相信它会引导你到最后的解决方案

$().ready(function(){ 
    $('ul.menu').hover(function(event){  
     var hoverItem = event.target; 
     //hide other ul's submenu 
     $(hoverItem).siblings('li').children('ul').stop(true,true).hide() 
     //show current submenu 
     $(hoverItem).children('ul').stop(true,true).fadeIn() 
    },function(event){ 
     //console.log(event.target); 
     $('ul.menu li').children('ul').stop(true,true).delay(1500).fadeOut() 
    }) 
}); 

希望能帮助你。干杯