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");
}

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

1 个答案: