This 堆栈闪电战 https://stackblitz.com/edit/angular-txgxyt?file=styles.css(SB)显示了问题。
CSS类.WHYYYYY显示了我面临的“两个”问题。
- 为了使垫菜单在悬停时打开，我需要设置
z-index:1050; (参考 2 黑客解决方法 https://stackoverflow.com/a/53618962/6852937）在菜单按钮上。
- 这会产生“对话雾”的问题。 （点击按钮->SB）
- 我发现覆盖层的默认“z-index 为 1000”
看来我有两种方法来解决这个问题。
- 给雾一个更高的 z-index（hack the hack）
-
(desired solution) make the hover menu work with normal z-index.
- 我不明白为什么我需要
z-index:1050;。似乎当垫子菜单打开时，它的“z索引方向”峰值会非常高，因此我触发了按钮（mouseleave）事件（实际上将再次关闭其垫子菜单）。
这是一个错误吗？我可以防止创建的垫菜单出现这种刺穿/尖刺吗？如何在雾中禁用有效的悬停菜单？
当材质 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:
子菜单.component.html
<mat-menu ... [hasBackdrop]="false">
并且您不需要使用 z-index 进行任何类型的解决方法。
叉式堆栈闪电战 https://stackblitz.com/edit/angular-txgxyt-dqm4tb?file=styles.css
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
