垫菜单穿过“ cdk覆盖雾”

Question

此STACKBLITZ（SB）显示了问题。

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

1. 要使鼠标悬停时打开菜单，我需要在菜单按钮上设置z-index:1050;（ref 2 hacky workaround）。
2. 这会引起“对话框雾”问题。 （点击按钮-> SB）
3. 我发现覆盖层的默认“ z索引为1000”

似乎我有两种解决方法。

1. 赋予雾更高的z-index（破解）
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事件。

这就是为什么在按钮上设置大于1000的z-index使其起作用的原因。

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

sub-menu.component.html

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

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

Forked Stackblitz