CSS按钮无法正确突出显示

Question

我有这个按钮，当我单击它时，它不能正确突出显示，请查看下面的图像和CSS文件

切换按钮的CSS：

.mat-button-toggle {
   box-sizing: border-box;
   height: 33px;
   width: 159px;
   border: 1px solid #E1E1E1;
   border-radius: 2px;
   background-color: #FFFFFF;
}

.mat-button-toggle:hover {
   border: 1px #000 solid !important;
   background-color: #FFF !important;
   border-radius: 5px !important;
}

文本的CSS

 .ticket {
  margin-top: 5px;;
  height: 18px;
  width: 122px;
  color: #111111;
  font-family: Arial;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 18px;
}

HTML

<mat-button-toggle-group name="fontStyle" aria-label="Font Style"  >
  <mat-button-toggle routerLink="ticketView" value="ticketView">
    <div class="ticket" id="p1">
      {{'TicketOverView' | translate}}
    </div>
</mat-button-toggle>

Answer 1

我的猜测是您的CSS HTML中还有其他问题。我已经在Codepen中为您重新创建了CSS，无法重现您的结果。我会仔细检查您的html标记。这是我制作的codepenhttps://codepen.io/jmllr89/pen/KKdzLGw

此外，在：hover伪类上也不需要！important。 CSS足够聪明，可以识别需要更改的内容。因此，只需在mat-button-toggle中定义初始状态，然后在mat-button-toggle中定义：悬停即可创建第二种状态，css将进行必要的更改。

.mat-button-toggle {
 height: 33px;
 width: 159px;
 border: 1px solid #E1E1E1;
 border-radius: 2px;
 background-color: #FFFFFF;
}

.mat-button-toggle:hover {
 border-color: #000;
 border-radius: 5px;
}