Как грамотно разобраться с :hover при адаптации?

Question

[Денис Букреев]

Взял в руки планшет и понял, что верстка косячная более, чем полностью - все кнопочки, ссылки и любые другие элементы, имеющие :hover, застывают в состоянии наведения при клике по ним.

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

Есть ли какой-то простой способ?

Comments

[Vitaliy]

на сколько я помню, это на всех touch'ах такое

[Денис Букреев]

Виталий Столяров: вот и я думаю, наверняка можно выпилить скрипт какой

Answer 1

[Максим]

я есле не ошибаюсь на тач скринах нету понятия даже о hover эффекте , только click

Comments

[Александр Алексеев]

не только клик, точнее совсем не клик а тач состоящий из touchstart, touchmove и touchend

[Максим Люмен]

shure348: даже так ? спасибо за поправку

Answer 2

[Егор Рублёв]

Лучше переписать, можно попробовать общий стиль прописать и задать ему !important (поверх всех стилей).

Comments

[Денис Букреев]

слишком толсто
5000 строк стилей

[Егор Рублёв]

Денис Букреев: 5000 строк это стили для кнопок?

[Егор Рублёв]

Денис Букреев: например, если кнопки в button, задайте именно ему button {код !important;}, так-же аналогичным элементам. Но это не красиво. 5000 строк это очень много (

[Денис Букреев]

Егор Рублёв: да стили переписывать - это печально слишком, вряд ли так делается
5000 - это весь проект, даля на ховеры выходит естественно приличная

Answer 3

[Алексей Струков]

Там все просто.
На тач устройствах некоторые браузеры (возможно даже все) обрабатывают ховер таким образом, что сохраняют стиль его отображения, пока не будет нажато что то еще.
Решить проблему можно либо через джаваскрипт, определяя тип браузера, или производя более сложные вычисления, отлавливая евенты типа ontouchstart на body и переопределяя стили для ховера(можно учесть гибридные устройства с мышкой и тач экраном, но тогда придется возвращать стили для ховера отслеживая onmousedown допустим)
Либо через css прописать все ховеры в медиазапросы, чтобы они например срабатывали только при ширине экрана устройства не менее 1280 пикселей (min-device-width: 1280px)
Это значение охватывает 95 процентов всех устройств, оставляя за бортом несколько моделей здоровых планшетов и гибридные ноутбуки с тач экраном (лично я считаю что нельзя все оптимизировать идеально, ибо нет предела совершенства, поэтому делаем как с древними браузерами - добиваемся хорошей работы на массовых системах, а все экзотическое пусть работает без свистелок, ховеров и градиентов)