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

Question

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

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

Abive 是未悬停时的站点，下方是父菜单项悬停时的站点：

从技术上讲，它可以工作，叠加层 div 是 shown/hidden。但是，当我将鼠标悬停到显示覆盖的下一个父项时，它会在它应该保持可见的 IE 时消失。如果我随后将鼠标悬停在 'BODY' 上，则会出现新的子菜单，但叠加层会消失。

通过将元素从 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

您可以在 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;
}

您可以在 li 上使用不同的 hover 来显示子菜单：

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

Answer 2

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

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

尽管从一个父项移动到另一个父项时，叠加层会淡出，然后再次出现。至少在从一个项移动到另一个项时，叠加层仍然存在。

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

Show overlay in background when hovering over parent menu items

css

wordpress

jquery