Как поставить hover на тачпад?

Question

[olchagmk]

Всем привет! Суть вопроса следующая. Есть сайт, у него есть баттоны, на баттоны прописаны hover, который меняет цвет при наведении. Но на мобильной версии - он меняет цвет при нажатии и не скидывается до тех пор пока не будет нажато в другое место. Т.е. hover срабатывает как focus. Как решить этот вопрос?
P.S. Убрал полностью hover для моб версии, заказчику не подошло, хочет что-бы было видно "тап" по баттону.
P.P.S У меня с JS всё плохо.

Answer 1

[Rustam Bainazarov]

CSS-детекция ненадёжна:
https://developer.mozilla.org/en-US/docs/Web/CSS/@...
https://developer.mozilla.org/en-US/docs/Web/CSS/@...

В Android Chrome срабатывает какого-то дьявола первое:


Лучше использовать любой JS-скрипт, определяющий сенсорный экран, ставить класс на body, после чего писать стили отдельно для этого случая. Стили для сенсора нужно ставить для :active вместо :hover.

Я использую этот простой скрипт:

Comments

[olchagmk]

Добрый день! Я сейчас посмотрел тут этот код и протестил: https://jsfiddle.net/79evcu5n/
Все равно нужно скликивать, или это только в редакторе?

[Rustam Bainazarov]

olchagmk, какой браузер?

[olchagmk]

Рустам Байназаров, Хром у меня

[Rustam Bainazarov]

olchagmk, у меня работает:

[Rustam Bainazarov]

olchagmk, на втором Android-телефоне тоже. На iPhone с iOS 14.2 тоже.

[olchagmk]

Рустам Байназаров, Всё работает, вы прекрасны!)

[Rustam Bainazarov]

olchagmk, не за что.