时间戳

首页 > 解决方案 > 使用垫子菜单在悬停按钮上显示问题；活动按钮在点击时消失

css - 使用垫子菜单在悬停按钮上显示问题；活动按钮在点击时消失

问题描述

我创建了一个“悬停时显示”垫菜单按钮，您可以在此处看到：

https://stackblitz.com/edit/angular-show-hide-menu?file=app%2Fshow-hide-menu.scss

问题是，当我单击按钮时，它会消失，给我留下一个看起来很奇怪的垫子菜单。我尝试使用 css（如示例中所示）定位按钮的活动或焦点状态，但这似乎无助于保持活动按钮的出现。

当您单击示例中的按钮时，当按钮处于活动状态时，您会看到蓝色背景闪烁，但它不会保持蓝色。蓝色背景只是为了调试，但基本上我希望每当单击按钮时，即当所选菜单处于活动状态时，'display: flex' css 就会启动。

非常感谢任何帮助！

-S。阿罗拉

标签： cssangularangular-material

解决方案

您的“更多选项”按钮会消失，因为它在菜单打开后不再处于活动状态或焦点。事实上，您无法使其处于活动状态或聚焦，因为菜单创建了一个透明的背景层，覆盖了屏幕上的所有其他内容，您可以在检查 HTML 时看到它。这就是为什么在菜单打开时无法让按钮重新出现的原因。

解决此问题的一种方法是观察菜单本身的状态，并在其关联菜单打开时向按钮添加一个类：

<button fxFlex="80" mat-icon-button matTooltip="More Options"
    [matMenuTriggerFor]="optionsMenu" class="hover-display"
    #menuTrigger="matMenuTrigger" [ngClass]="{ 'open': menuTrigger.menuOpen }">

然后你可以在你的 CSS 中使用这个类，而不是针对活动或聚焦状态：

.node .hover-display.open {
    display: flex;
}

推荐阅读