Кнопка CSS не подсвечивается должным образом - PullRequest
Новая
       21

Кнопка CSS не подсвечивается должным образом

0 голосов
/ 17 апреля 2020

У меня есть эта кнопка, которая не подсвечивается должным образом, когда я нажимаю на нее, пожалуйста, смотрите изображение и файл CSS ниже

image

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>

1 Ответ

1 голос
/ 17 апреля 2020

Полагаю, что в вашем css html происходит что-то еще. Я воссоздал ваш css в коде для вас и не смог воспроизвести ваши результаты. Я бы дважды проверил вашу html разметку. Вот кодекс, который я произвел https://codepen.io/jmllr89/pen/KKdzLGw

Также вам не нужно! Важный для псевдокласса: hover. 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;
}
...