1

On a hover state I'm trying to remove the background color of an md-button when I hover, but I'm not able to affect it.

I'm using Material 2

In my html I have the following:

<div class="case-nav-container">
  <div *ngFor="let item of nav">
    <a md-button           
       routerLinkActive #rla="routerLinkActive"
       class = "case-button"
       [class.active]="rla.isActive">{{item.display}}</a> <br>
  </div>
</div>

In my SCSS I have:

a.case-button{

  min-width: 200px;
  text-align: left;

  &:hover{
    border-left: solid blue 6px;
    background-color: none;
  }

}

My question is how do I remove the bg-color of the button?

cnak2
  • 1,711
  • 3
  • 28
  • 53
  • Possible duplicate of [How can I change Angular Material button background color on hover state?](https://stackoverflow.com/questions/44342158/how-can-i-change-angular-material-button-background-color-on-hover-state) – isherwood Aug 16 '17 at 20:09

2 Answers2

4

The background color comes in the form of a focus overlay div. This will remove it,

template:

<a mat-button class="no-hover">Basic Button</a>

css:

.mat-button.no-hover ::ng-deep .mat-button-focus-overlay {
  background: none;
}

demo:

https://stackblitz.com/edit/angular-material2-issue-dyck3s

Will Howell
  • 3,585
  • 2
  • 21
  • 32
-1

I think you need to increase the specificity of your SCSS. Try .case-nav-container a .case-button. Your SCSS will need to address the element you are modifying more specifically than the Angular Material code is. In some instances where increasing specificity isn't practical for an element a !important SCSS attribute will work as well to override the Angular Material default background color.

isherwood
  • 58,414
  • 16
  • 114
  • 157