mat-menu 穿透 "cdk overlay fog"

mat-menu pierces through "cdk overlay fog"

这 STACKBLITZ (SB) 显示了问题。

CSS class .WHYYYYY 显示了我面临的 "two" 个问题。

  1. 为了在鼠标悬停时打开垫子菜单，我需要在菜单按钮上设置 z-index:1050; ()。
  2. 这会导致 "dialog fog" 出现问题。 （点击按钮 -> SB）
  3. 我发现叠加层有默认值 "z-index of 1000"

看来我有两种解决方法。

  1. 给雾一个更高的 z-index（hack hack）
  2. （所需的解决方案） 使悬停菜单与正常的 z-index 一起工作。
    • 我不明白为什么我需要 z-index:1050;。似乎当垫子菜单打开时，它会在一瞬间达到 "z index-wise" 非常高的水平，因此我触发了按钮（鼠标离开）事件（实际上会再次关闭其垫子菜单）。

这是一个错误吗？我可以阻止创建的垫菜单的 piercing/spiking 吗？我怎样才能在雾中禁用有效的悬停菜单？

当 material cdk 打开菜单时，它会创建 cdk-overlay-container 背景区域填满所有浏览器 window。

body
  your app elements

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

一旦触发 mouseenter 背景与按钮重叠的事件，它们会立即获得 mouseleave 事件。

这就是为什么将按钮的 z-index 设置为大于 1000 才能正常工作。

但是你可以猜到你可以简单地扔掉 backdrop:

亚menu.component.html

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

并且您不需要使用 z-index 的任何变通方法。

Forked Stackblitz