jquery - mouseenter 上的联合 jquery

Question

我有一个带有下拉子菜单的导航。当下拉出现时，我想要一个菜单​​+下拉的联合，如下所示：

因此，如果鼠标以粉红色退出整个块，则子导航消失。目前，如果鼠标只退出下拉菜单，下拉菜单就消失了。我看到了这个例子，但是将课程组合在一起对我不起作用。

这是我的小提琴

Answer 1

为什么不从mouseenterAND的目标中删除子类mouseleave？像这样：

var animate;
$(".myClass").mouseenter(function () {
  clearTimeout(animate);
  $('.myClass').css('background-color','#777');
  $('.mySubClass').css('display','inline');
});
$(".myClass").mouseleave(function() {
  animate = setTimeout(function(){
    $('.myClass .mySubClass').css('display','none');
    $('.myClass').css('background-color','#49616a');
  }, 800);
});​

...因为.myClass覆盖区域已经是菜单和下拉菜单的结合（因为相应的元素包括链接和下拉菜单）。

我在这里修复了另一个潜在的错误：可能将 mouseleave-mouseenter 事件排序得太快，然后超时功能将触发，即使它不应该触发（因为光标停留在菜单区域中）。为了防止这种情况，添加了一个附加变量 ( animate)；它将超时存储在mouseleave处理程序中，并在“mouseenter”中清除它。