垫菜单穿过“ cdk覆盖雾”

Question

此STACKBLITZ（SB）显示了问题。

CSS类.WHYYYYY显示了我面临的“两个”问题。

1. 为了使菜单在悬停时打开，我需要在菜单按钮上进行设置z-index:1050;（ref 2 hacky workaround）。
2. 这就产生了“对话框雾”的问题。（单击按钮-> SB）
3. 我发现叠加层的默认“ z索引为1000”

看来我有两种解决方法。

1. 给雾一个更高的z索引（hack hack）
2. （所需的解决方案）使悬停菜单与常规z-index一起使用。
   • 我不明白我为什么需要z-index:1050;。看来，当打开菜单菜单时，它会瞬间升高“ z索引方向”，因此我触发了按钮事件（实际上是再次关闭其菜单菜单）。

这是错误吗？我可以防止创建的菜单菜单刺穿/刺入吗？如何在雾下禁用工作中的悬停菜单？

Answer 1

当cdk材料打开菜单时，它将创建一个cdk-overlay-container背景区域，该背景区域将填充所有浏览器窗口。

body
  your app elements

  div.cdk-overlay-container   - z-index = 1000
    div.cdk-overlay-backdrop

一旦触发mouseenter事件，背景就会与您的按钮重叠，并且按钮会mouseleave立即获得事件。

这就是为什么将按钮上的z-index设置为大于1000的原因。

但是您可以猜测，您可以简单地将其丢弃backdrop：

sub-menu.component.html

<mat-menu ... [hasBackdrop]="false">

而且您不需要z-index的任何解决方法。

分叉的Stackblitz