:hover в мобильных браузерах

[Bassline]

Допустим есть некая форма со списком услуг. При наведение пункт списка меняет цвет. При клике цвет фиксируется, т.е. добаляется класс с помощью js, при повторном клике класс удаляется и соответственно цвет меняется. Но на тач устройствах hover воспринимается как клик, и в результате выделение не снимается после повторного клика.

Пробовал заменить css hover на js, и при клике насильно удалять класс, который вешается при наведении. Помогло, но не во всех браузерах, например в 4 айфоне 13-ый яндекс браузер и какая-то сафари не повелись на этот трюк, и упорно цепляются за hover.

 

Какие есть еще варианты?

[npofopr]

Есть библиотеки, по типу http://eightmedia.github.io/hammer.js/

[klierik]

  On 6/1/2014 at 5:50 PM, Bassline said:

Но на тач устройствах hover воспринимается как клик

 

На touch устройствах нет такого события вообще. Надо обрабатывать каждый клик индивидуально.

[Bassline]

  On 6/2/2014 at 8:27 AM, klierik said:

На touch устройствах нет такого события вообще.

Тогда почему почему они реагируют на него? Если убрать все клики, весь js и оставить только один css hover, то при тапе сработают стили повешенные на ховер.

[Switch74]

попробуйте сбрасывать ховер стили через несколько милисек после клика с помощью js

[Cherous]

Не надо js.

Есть псевдоклассы :hover и :focus, которые отвечают за состояния элемента при неведение и в фокусе. На мобильных устройствах :hover срабатывать не будет...

Edited June 4, 2014 by Cherous

[Switch74]

  On 6/4/2014 at 12:09 PM, Cherous said:

Не надо js.

Есть псевдоклассы :hover и :focus, которые отвечают за состояния элемента при неведение и в фокусе. На мобильных устройствах :hover срабатывать не будет...

читайте выше, у ТС как раз hover срабатывает

[klierik]

я бы копал в сторону:

:link, :visited, :hover, :focus, :active

ибо они не индивидуальны, а наследуются. У touch-устройств нет :hover события, скорее всего срабатывает :focus.

[Bassline]

Все-таки хочу разобраться с этим до конца.

 

  On 6/5/2014 at 6:58 AM, klierik said:

я бы копал в сторону:

:link, :visited, :hover, :focus, :active

ибо они не индивидуальны, а наследуются. У touch-устройств нет :hover события, скорее всего срабатывает :focus.

 

Взял чистую, без единого стиля, страницу. Вставил div с текстом и прописал div:hover { text-decoration:underline;}. При тапе по тексту происходит его подчеркивание. Дополнительно прописал для дива div:focus, div:active и т.д. { text-decoration: none}. Все равно при тапе текст подчеркивается.

Как так? У тач устройств же нет такого события...

Или я чего-то не догоняю?

Edited August 26, 2014 by Bassline

[npofopr]

Оно как бы есть. Одно дело просто div, а другое ссылка. 

Если на PC при ховере мы увидим эффект, то на планшетах, вместе с hover еще и переход по ссылке произойдет, т.е. как бы этот самый hover становится бесполезным. 

Ховер там можно посмотреть, разве что длительным удерживанием пальца на экране, т.е. длительным тапом. Вроде так. 

Edited August 26, 2014 by npofopr

[Great Rash]

  On 8/26/2014 at 10:32 AM, npofopr said:

Ховер там можно посмотреть, разве что длительным удерживанием пальца на экране, т.е. длительным тапом. Вроде так. 

Это будет :active, а не :hover 

[borus]

Здравствуйте.

 

Похоже и у меня проблема автора темы. Тестирую в Хроме как бы из-под тач устройства, и при клике срабатывает стиль :hover. Как сделать, чтобы стиль наведения не срабатывал на тач-устройствах?

[klierik]

в крайнем случае для тач-устройств можно "скормить" отдельный файл стилей с описаным :hover

[borus]

  On 6/2/2015 at 2:21 PM, klierik said:

в крайнем случае для тач-устройств можно "скормить" отдельный файл стилей с описаным :hover

то есть я этим стилем буду отменять вышеописанный в таблице стилей hover: стиль... А как в css или не в css указать, что это только для тач устройств?

@media handheld

так?

[klierik]

не проще ли просто проверить самому?

Вот вся @media: http://htmlbook.ru/css/media

[afdw]

Если я правильно помню, то все телефоны и планшеты считаются за screen.

[antonKar]

1) цепляем библиотеку https://github.com/hgoebl/mobile-detect.js

2) в document.ready определяем

var md = new MobileDetect(navigator.userAgent),grade = md.mobileGrade();window.mobileDetect = md;

3) к тегу html на мобильных устройствах добавится класс .mobile. Все ховеры в css прописать с начальным html:not(.mobile)

 

В итоге ховеров на мобильниках и планшетах не будет

Edited June 3, 2015 by antonKar