Проблема с показом на кнопке при наведении курсора на меню; активная кнопка исчезает при нажатии

Question

Я создал кнопку матового меню 'show on hover', как вы можете видеть здесь:

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

Проблема в том, что когда я нажимаю кнопку, она исчезает,оставив меня с странно выглядящим ковриком.Я попытался нацелить на активное или фокусное состояние кнопки, используя css (показано в примере), но это не помогает сохранить активную кнопку.

Когда вы нажмете кнопку в примере, вы увидите синий фон, когда кнопка активна, однако она не остается синей.Синий фон предназначен только для отладки, но в основном я хочу, чтобы css 'display: flex' срабатывал при каждом нажатии кнопки, т. Е. При активном выбранном меню.

Любая помощь очень ценится!

-S.Arora

Answer 1

Ваша кнопка «Дополнительные параметры» исчезает, потому что она больше не активна и не находится в фокусе после открытия меню.Фактически, вы не можете сделать его активным или сфокусированным, потому что меню создает прозрачный фоновый слой, который покрывает все остальное на экране, что вы можете увидеть, просматривая 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;
}