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

Question

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

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

我尝试过使用 color: !important;，但仍然没有结果。

这里是 stackblitz 链接。

- PGH

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

- לבני מלכה

---

告诉我需要更多帮助。 - לבני מלכה

谢谢你的回答，只有这个问题。如果出现任何问题，我一定会再联系你。 - PGH

很高兴能帮忙 :) - לבני מלכה

Answer 2

穿上你的CSS衣服吧！这是代码。

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

- Myco Claro

Answer 3

使用简单的代码更改背景颜色..

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

- Sathiamoorthy