需要有关子菜单的菜单上的JQuery鼠标悬停的帮助

Question

我有这个菜单（@ jsFiddle），如果发生以下鼠标事件，会发生这种情况：

1. 将鼠标悬停在Movies
上
2. 然后开始将鼠标拖动到Movie library
上的鼠标悬停
3. 拖动时，您不小心碰到了Home菜单项
4. 导致Home子菜单显示并隐藏Movies子菜单。

这不是我想要的效果。所以即时寻求一些帮助。我怎么能解决这个问题，这样如果我拖动我的鼠标并且我不小心触摸了其他一些菜单选项，javascript就足够聪明，知道它不应该隐藏选定的子菜单。

我可以在悬停上添加某种延迟吗？感谢所有帮助！

Answer 1

你可以使用hoverIntent来限制mousein / mouseout事件，以防止事件发生（我认为你需要这个......）。检查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()
    })
});

希望能帮到你。干杯