将鼠标悬停在父菜单项上时，在背景中显示叠加层

Question

我有一个基于CSS的下拉菜单，在Wordpress中使用他们的菜单创建。我试图添加一个jQuery overlay div，以便在父菜单项悬停时显示，并显示子菜单。

我发现以下JSFiddle有帮助，我的代码基于http://jsfiddle.net/49Qvm/28/，但我将选择器从ul更改为#menu-main-menu > .menu-parent-item，因此它会保持打开状态同时在整个子菜单上盘旋。

Abive是不悬停时的站点，下面是父菜单项悬停的时间：

从技术上讲，它可以工作，并且显示/隐藏叠加div。但是当我将鼠标悬停在显示叠加层的下一个父项时，它会在它保持可见IE时消失。如果我将鼠标悬停在＆＃39; BODY＆＃39;上，则会出现新的子菜单，但叠加层会消失。

通过将元素从ul更改为li，可以在JSFiddle上看到此示例。然后，当您从一个li悬停到另一个时，叠加层会消失。

如何调整JS代码，以便当我从一个父菜单项移动到下一个菜单项时，将继续显示叠加层？

PS。如果菜单项下方有子菜单，则会将menu-item-has-children和menu-parent-item添加到li

这是我使用的JS代码：

(function($) {
$('#menu-main-menu > .menu-parent-item').hover(function(){
    $('#menu_overlay').fadeTo(200, 1);
}, function(){
    $('#menu_overlay').fadeTo(200, 0, function(){
        $(this).hide();
    });
});
})(jQuery);

Answer 1

我最终通过使用以下代码找到了我想要的东西，这似乎更简单。

(function($) {
$("#menu-main-menu > .menu-parent-item").hover(function(){
    $('#menu_overlay').fadeToggle();
});
})(jQuery);

虽然当从一个父项目转到另一个父项目时，叠加层淡出，然后再次出现..至少在从一个项目移动到另一个项目时，叠加层仍然存在。

Answer 2

您可以在CSS中完全执行此操作。

不要隐藏darkness，但在rgba中给它一个0的不透明度，并添加0.2s过渡：

#darkness {
  background:rgba(0, 0, 0, 0);
  transition: background 0.2s;
}

将鼠标悬停在ul时，将darkness的不透明度更改为0.5：

ul:hover + #darkness {
  background:rgba(0, 0, 0, 0.5) !important;
}

您可以在hover上使用其他li来显示子菜单：

HTML：

<ul>
  <li>Home
    <ul>
      <li>Submenu 1
      <li>Submenu 2
    </ul>
  </li>
</ul>

CSS：

li ul {
  display: none;
}

li:hover ul {
  display: block;
}

Working Fiddle