Чтобы изменить значок и цвет текста кнопки при наведении курсора мыши в компоненте меню

Question

Я использую Меню с иконками компонент в моем проекте. При наведении мыши на пункты меню (например: редактирование) Я хочу изменить текст и цвет значка , что-то вроде это.

Но я могу дать только background-color при наведении мыши, но не могу изменить text-color при наведении мыши.

Я пытался дать color:! Важный; также, все еще безрезультатно.

Вот ссылка stackblitz .

Answer 1

Используйте код, указанный ниже:

.mat-menu-item:hover{
  background-color:grey;
  color: purple;
}
.mat-menu-item:hover .mat-icon{
  color: purple;
}

выход:

см. Здесь: https://stackblitz.com/edit/angular-gytsqs-hh8mtq?file=app/menu-icons-example.html

Answer 2

наденьте свой человек! вот код.

 .mat-menu-item:hover{
      color: blue;
  }