在離子按鈕上設置顏色取消 hover

Question

我正在為我的應用程序制作一個按鈕欄，我正在嘗試通過其 state（假，真）更改按鈕的顏色。

現在按鈕以綠色開始，而 hover 在單擊其白色時為淺綠色，單擊它后按鈕變為白色並且 hover 不再工作（懸停時沒有任何反應）。 我嘗試通過 DOM 更改按鈕的 class 但按鈕消失了。

HTML

    <ion-button *ngIf="getAudio() !== undefined" class="musicIcon" id="musicIcon" fill="clear" button (click)="musicToggle()">
      <audio id="backgroundAudio" src="{{getAudio()}}"></audio>
      <ion-icon slot="icon-only" name="musical-notes"></ion-icon>
    </ion-button>

CSS

.musicIcon{
    --color: #047E00;
    --color-hover: #A9FEA6;
}

JS

  musicToggle() {
    this.musicState = !this.musicState;
    const icon = document.getElementById("musicIcon");
    const audio = document.getElementById("backgroundAudio") as any;
    if (this.musicState) {
      audio.muted = true;
      icon.style.color = 'white';
    } else {
      audio.muted = false;
      icon.style.color = '#047E00';
    }
  }

Answer 1

我認為不改變 javascript 邏輯中的 styles 是有意義的，但盡可能多地留給 Ionic 的外觀。 主要問題似乎是，您使用 static 值覆蓋顏色樣式，其中 Ionic 會動態使用--color或--color-hover的值。

首先，你知道Ionic 的主題嗎？ 如果您將綠色定義為主要顏色，您的<ion-button>將具有默認顏色，並且您不必編寫自定義 class。

如果您希望按鈕在this.musicState === true時具有不同的顏色，最簡單的方法是通過color -attribute 在模板中直接定義：

 <ion-button *ngIf="getAudio() !== undefined" [color]="musicState ? 'light' : 'primary'" class="musicIcon" id="musicIcon" fill="clear" button (click)="musicToggle()">
  <audio id="backgroundAudio" src="{{getAudio()}}"></audio>
  <ion-icon slot="icon-only" name="musical-notes"></ion-icon>
</ion-button>

通過此調整，您可以刪除您的 CSS 類，並且您的 musicToggle() 函數將只是以下幾行：

  musicToggle() {
    this.musicState = !this.musicState;
    const icon = document.getElementById("musicIcon");
    const audio = document.getElementById("backgroundAudio") as any;
  }