在菜单组件中更改鼠标悬停时按钮的图标和文本颜色

Question

我在我的项目中使用带有图标组件的菜单。鼠标悬停在菜单项上（例如：编辑）我想要更改文本和图标颜色，就像这样。

但我只能在鼠标悬停时给出背景颜色，但无法在鼠标悬停时更改文本颜色。

我尝试过给予颜色：！重要;还是，仍然没有结果。

这是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

穿上你的css男人！这是代码。

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