To change icon and text-color of button on mouse hover in menu component

Question

I am using Menu with icons component in my project.On mouse hovering the menu items(ex: edit) i want to change both the text and icon color,something like this.

But i am able to give only background-color on mouse hover but unable to change the text-color on mouse hover.

I tried giving color: !important; also, still no result.

Here is the stackblitz link.

user_9140740 · Answer

Use code as below:

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

output:

see here:https://stackblitz.com/edit/angular-gytsqs-hh8mtq?file=app/menu-icons-example.html

user_5745917 · Answer

put on your css man! here's the code.

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

user_1862590 · Answer

Use the simple code change background color..

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

To change icon and text-color of button on mouse hover in menu component

3 Answers