Как работают псевдоклассы :hover и :active на мобильных устройствах?

Псевдоклассы :hover и :active работают на мобильных устройствах следующим образом:

• :hover изменяет элемент при наведении на него мышью. vk.com На сенсорных экранах срабатывает при нажатии пальцем на элемент. vk.com При работе с клавиатурой этот псевдокласс остаётся незадействованным. vk.com
• :active срабатывает в тот момент, когда пользователь уже кликнул мышью по элементу, но ещё не отпустил его. vk.com На мобильных экранах отрабатывает во время касания элемента (за исключением некоторых мобильных браузеров, например Safari). vk.com

Однако мобильные браузеры реагируют на псевдокласс :hover не всегда так, как нужно разработчику: иногда блокируют обработчик клика по элементу (он срабатывает со второго раза) или оставляют элемент в состоянии ховера (до тех пор, пока не кликнешь по другому элементу). habr.com

Чтобы решить проблему, можно использовать классы touch и no-touch и описывать :hover только для версий с мышью, а для версий с тачем использовать :active. habr.com