Angular 材质切换按钮：如何设置自己的按钮样式？

Question

我正在尝试设置垫按钮切换的样式。当未选择切换时，竖起大拇指的图像是灰色的，但是当我将鼠标悬停在图像上时，它是绿色的。当它是选定的按钮时，我希望它也是绿色的。如何使悬停状态也成为选中（选中）状态？

HTML：

    <mat-button-toggle-group #group="matButtonToggleGroup">
        <mat-button-toggle class="audit-helpful-btn" style="margin-right: 20px;" value="up">
            <div class="audit-helpful-btn_image"></div>
            <div class="audit-helpful-btn_span">This was helpful</div>
        </mat-button-toggle>
        <mat-button-toggle class="audit-helpful-btn-down" value="down">
            <div class="audit-helpful-btn_image-down"></div>
            <div class="audit-helpful-btn_span">This was not helpful</div>
        </mat-button-toggle>
    </mat-button-toggle-group>

CSS：

.audit-helpful-btn {
display: flex;
background-color: #fff;
border: 1px solid #d5d5d5;
height: 40px;
min-height: 40px;
line-height: 39px !important;
white-space: nowrap;
flex-direction: row;
padding: 0px;
align-items: center;

&_image {
  display: inline-block;
  background-image: url("../../../../../../assets/security/audits/thumbs-up_neutral.svg");
  background-repeat: no-repeat;
  background-size: 26px 26px;
  background-position: left top;
  width: 26px;
  height: 26px;
  margin: 0px 10px 0px 10px;
  padding: 0px;

}

&_image:hover {
  background-image: url("../../../../../../assets/security/audits/thumbs-up.svg");
}


&:hover {
  background-color: #f2f2f2 !important;
  color: #808080;
}

&:hover .audit-helpful-btn_image {
  background-image: url("../../../../../../assets/security/audits/thumbs-up.svg");
}

&:disabled {
  background-color: gray
}

Answer 1

“选定”mat-toggle-button 应用了 mat-toggle-button-checked 类。您可以将其用作选择器的一部分：

&_image:hover,
&.mat-toggle-button-checked > &_image {
  background-image: url("../../../../../../assets/security/audits/thumbs-up.svg");
}