Блог

В приложении есть несколько кнопок, некоторые из них выглядят как настоящие кнопки, в то время как другие имеют другие значки, и они используются для сортировки списков.

Я хочу добавить наведение курсора мыши на кнопки, но чтобы избежать этого для кнопок «сортировки».

Это код:

 .ui.button {
  background: #262445;
  color: #ffffff;
  amp;:hover {
    background: #3c3669;
    color: #ffffff;
  }
  amp;:active,
  amp;:focus {
    color: #ffffff;
    background: #1a1635;
  }
}
  

разница только в фоновом режиме.

Все кнопки в моем коде содержат ui.button класс в режиме проверки. Кнопки «сортировка» также содержат ui.button.sort-buttons-inactive или ui.button.sort-buttons-active .

Я пробовал вот так

 .ui.button {
  background: #262445;
  color: #ffffff;
  amp;:hover:not(sort-buttons-inactive):not(sort-buttons-active) {
    background: #3c3669;
    color: #ffffff;
  }
  amp;:active,
  amp;:focus:not(sort-buttons-inactive):not(sort-buttons-active) {
    color: #ffffff;
    background: #1a1635;
  }
}
  

поэтому, когда элемент не содержит sort-buttons-inactive or sort-buttons-active , он не должен вносить никаких изменений при наведении курсора мыши.

Однако это не работает. Обычные кнопки работают нормально, но это также изменяет кнопки «сортировки», они меняют свой цвет на белый (#ffffff), чего не должно происходить.

Есть ли способ решить эту проблему?

Вы упускаете полную остановку при выборе класса.

 :not(sort-buttons-inactive):not(sort-buttons-active)
  

Сделайте это

 :not(.sort-buttons-inactive):not(.sort-buttons-active)