如何去除 angular mat-button-toggle hover 效果？

Question

我正在嘗試刪除 mat-button-toggle 的默認 hover 效果。 但不知何故，我無法覆蓋它。 每當我在按鈕上 hover 時，我都會得到這個白色的陰影背景。

.html文件：

<div class="header">
  <mat-button-toggle-group class="mat-menu" [value]=target>
    <mat-button-toggle (change)="redirekt($event.value)" value="/" [disableRipple]="true" class="mat-menu-item">Home</mat-button-toggle>
    <mat-button-toggle (change)="redirekt($event.value)" value="/test" [disableRipple]="true" class="mat-menu-item">Test</mat-button-toggle>
  </mat-button-toggle-group>
</div>
<div class="outlet">
  <router-outlet></router-outlet>
</div>

.scss 文件：

.mat-menu {
  width: 100%;
  border: none !important;
  border-radius: 0px;
  position: relative;
  background: mat_color($primary);
  text-align: left;
}

.mat-menu-item {
  align-self: center;

  margin: 0px 8px;
  font-size: 15px;

  @media (min-width: 768px) {
    margin: 5px 8px;
    font-size: 20px;
  }

  border: none !important;
  color: white;

  &:hover, &:focus, &:active {
    background-color: transparent !important;
    @media only screen and (min-width: 768px) {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }
  }
}

.mat-button-toggle-checked {
    color: mat-color($accent) !important;
}

Answer 1

能不能詳細一點。 據我了解，在 hover function 中嘗試覆蓋所有級別的顏色。 您一定嘗試過在不同級別的 div 中覆蓋它。

Answer 2

您還應該更改此樣式：

.mat-button-toggle-focus-overlay {
display: none;
}