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

Question

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

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

我试着给颜色：！重要；还有，还是没有结果。

这是stackblitz链接。

Answer 1

使用代码如下：

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

输出：