Olegas18 фев 2014 в 20:59

Как мы :hover на iOS побеждали…

6 мин

52K

Веб-разработка * JavaScript *

+16

Комментарии 13

ddv 19 фев 2014 в 03:50

Буквально вчера разбирался почему не работает ховер для невидимого div с фиксированными размерами position: absolute. Добавил пустой onclick и ховер заработал :-)…

Вообще с ховерами там всё плохо, в разные моменты времени он работает по разному, то пропадает если ткнуть мимо, то всегда установлен и никак не снять…

Olegas 19 фев 2014 в 07:13

Так там в том и дело, что чтобы снять ховер нужно ткунть в другой элемент, который сможет его «обработать».

НЛО прилетело и опубликовало эту надпись здесь

Olegas 19 фев 2014 в 10:12

Не знал об этом. Но на самом деле в нашем контексте это не требуется, т.к. у нас нет задачи сделать ховер не навешивая клик. Задача именно в том, чтобы ховер и клик работали вместе т.к. клик у нас навешен всегда (такие таблицы).

Но вариант интересный, спасибо.

Olegas 19 фев 2014 в 07:13

Так там в том и дело, что чтобы снять ховер нужно ткунть в другой элемент, который сможет его «обработать».

Jabher 19 фев 2014 в 07:35

не знаю зачем, но скажу, что МutationObserver с полифиллом работает в ie9, ie10, android 4.0, но не работает в android 2.3. Теперь вы тоже знаете эту бесполезную в данном контексте информацию.

НЛО прилетело и опубликовало эту надпись здесь

StreetStrider 19 фев 2014 в 09:16

По моему мнению основная проблема не в самом :hover, а в том, что он не подходит для модели тач-устройств. Скорее нужно перерабатывать UI под тач-устройства идеологически. Приведу очень грубый пример: показываем некоторый вспомогательный элемент по hover. Тач-вариант: показываем его в дефолтном состоянии. Да, интерфейс станет более загруженным (разной степени загруженности, в зависимости от количества элементов с таким поведением), но и более понятным в тач-варианте: исчезнет целый промежуточный шаг с наведением. Безусловно, задача это нетривиальная и требует неслабой проектировки и продумывания.

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

Olegas 19 фев 2014 в 09:40

Полностью согласен. Но в нашем случае есть постановка задачи, что система должна работать на iPad в web-варианте. Да, очевидно в некоторых местах интерфейс нужно делать иным. Но должна быть возможность им воспользоваться. Тут же просто принципиально невозможно было пользоваться системой, нужно было какое-то наименее интрузивное решение проблемы…

absolvo 19 фев 2014 в 14:27

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

Olegas 19 фев 2014 в 15:43

В итоге такое решение и получено. Автоматически.

НЛО прилетело и опубликовало эту надпись здесь

Sazonov 28 ноя 2021 в 15:03

Если кто-то попал сюда из гугла, то вот достаточно современное решение которое решило мои проблемы в Safari / iOS и некоторых других браузерах на тач устройствах:
`<html ontouchmove>`

Зарегистрируйтесь на Хабре, чтобы оставить комментарий