Как реализовать поддержку hover-эффектов на touch-устройствах?

Добрый день!

Делаем сайт, на главной странице есть навигация с :hover-эффектами, однако из всех доступных мне touch-устройств — только iphone коректно работает с hover. На планшете Samsung Galaxy Tab при тапе на ссылку браузер пытается было воспроизвести анимацию из hover и сразу переходит по ссылке.

Как реализовать корректную работу hover-эффектов на всех touch-устройствах?

Спасибо.
  • Вопрос задан
  • 7621 просмотр
Пригласить эксперта
Ответы на вопрос 3
akubintsev
@akubintsev
Опытный backend разработчик
:Hover уже давно не стоит использовать в качестве какой-то важной фичи UI именно из-за мобильных устройств
Ответ написан
chopik
@chopik Автор вопроса
Так я и спрашиваю как добиться на touch устройствах hover эффекта, пока на ум только двойной клик приходит. Т.е. по первому клику только анимация, по второму переход по ссылке.
Ответ написан
vserykh
@vserykh
Разработка сайтов, лендингов «под ключ»
Я заметил, что на двух андроид-устройствах в браузерах Google Chrome и Яндекс.Браузер hover наступает после клика по элементу. Если элемент на клик не реагирует, а реагирует только на наведение, это сработает. Не уверен, что на всех системах и во всех браузерах так.

Предполагаю, происходит следующее (это гипотеза, может быть неверной):
В тач-устройстве в браузере есть курсор, но он не отображается. Когда вы кликаете куда-то, курсор помещается в эти координаты, и остаётся там. Соответственно, элементы под курсором считают, что на них навелы курсор, и на них отрабатывает ховер.

Но если вы хотите, чтобы элемент реагировал и на ховер, и на клик, то выше верно сказали, что вы хотите нарушить грамотность UX. То есть, вы решаете неверно поставленную задачу. Значит, стоит поставить другую задачу, на уровне выше: как дать возможность пользователю взаимодействовать с одним элементом двумя способами. Но тут зависит от сути взаимодействия. Если вы хотите, чтобы просто была красивость при ховере, то на тач-скрине её не будет. Если хотите, чтобы всплывала подсказка или что-то вылезало — сделайте рядом иконку или кнопку, которая это будет делать. А клик на основном элементе не трогайте, не ломайте UX.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы