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

Question

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

1. 悬停在 电影
2. 然后开始将鼠标拖动到电影库上，
3. 在拖动过程中，您不小心触摸了Home菜单项
4. ，导致Home子菜单显示并隐藏Movies 子菜单。

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

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

Answer 1

您可以使用 hoverIntent 来限制 mousein/mouseouts 事件以防止意外触发（您需要我认为这个...）。检查 hiverIntent 网站上的示例。你会喜欢的。

Answer 2

我认为这个插件完全适合您想要做的事情： http://cherne.net/布莱恩/资源/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()
    })
});

希望对您有所帮助。干杯