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

Posted 2023-02-23

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

【英文标题】：To change icon and text-color of button on mouse hover in menu component

【发布时间】：2019-02-21 05:22:51

【问题描述】：

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

但我只能在鼠标悬停时提供 background-color，但无法在鼠标悬停时更改 text-color。

我也尝试了 color: !important;，但仍然没有结果。

这是stackblitz 链接。

【参考方案1】：

穿上你的 CSS 人！这是代码。

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

【参考方案2】：

使用代码如下：

.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

【讨论】：

告诉我以获得更多帮助

感谢您的回答，只有这个是问题。如果出现任何问题，我一定会回复您。

乐于助人:)

【参考方案3】：

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

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

【讨论】：

请不要添加“谢谢”作为答案。相反，请投票给您认为有帮助的答案。 - From Review