angular - mat-menu 穿透 "cdk overlay fog"

Question

这个STACKBLITZ (SB) 显示了问题。

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

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

看来我有两种方法来解决这个问题。

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

这是一个错误吗？我可以防止创建的垫菜单出现这种刺穿/尖刺吗？如何在雾中禁用有效的悬停菜单？

Answer 1

当 Material cdk 打开菜单时，它会创建 cdk-overlay-container ，其背景区域填充所有浏览器窗口。

body
  your app elements

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

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

这就是为什么在按钮上设置 z-index 大于 1000 才能使其正常工作的原因。

但是正如您所猜测的，您可以简单地扔掉该背景:

sub-menu.component.html

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

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

<强> Forked Stackblitz