Почему hover ломает UX на мобильных и как это исправить?

На тач-устройствах :hover ведёт себя странно: может залипать, срабатывать после тапа или вообще ломать визуальные состояния. Это особенно заметно в карточках, меню и кнопках.

Обычно стили пишут без условий:
.button:hover {
background: #000;
}

И в итоге на мобильных интерфейс начинает вести себя непредсказуемо.

Есть нативный способ разделить поведение устройств:
@media (hover: hover) {
.button:hover {
background: #000;
}
}

Теперь hover-эффекты работают только на устройствах, где реально есть курсор.

Можно отдельно настроить поведение для тач-устройств:
@media (hover: none) {
.button:active {
background: #000;
}
}

Это мелочь, но она резко улучшает UX и избавляет от странных багов на мобильных, интерфейс становится предсказуемым и логичным.

Code Ready | #совет