mat-menu 穿透“cdk 覆盖雾”

【问题标题】：mat-menu pierces through "cdk overlay fog"mat-menu 穿透“cdk 覆盖雾”
【发布时间】：2019-06-30 10:14:51
【问题描述】：

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

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

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

给雾一个更高的 z-index（hack the hack）
（所需的解决方案） 使悬停菜单与正常的 z-index 一起工作。
- 我不明白我为什么需要z-index:1050;。似乎当 mat-menu 打开时，它的“z index-wise”会在一段时间内非常高，因此我触发了按钮 (mouseleave) 事件（实际上这将再次关闭它的 mat-menu）。

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

【问题讨论】：

【解决方案1】：

当material 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 的变通方法。

【讨论】：