Страницы

Поиск по вопросам

вторник, 23 октября 2018 г.

Как починить :hover под мобильные устройства?

Всем привет, прошу совета. Есть выпадающее меню, реализованное через css :hover, т.е. есть пункт меню, при наведении срабатывает hover и подменю у данного пункта меняет свойство display на block, после того как убрали мышь, снова становится none. На обычном ПК все хорошо, но на мобильных из-за отсутствия возможности просто навести данная реализация не работает. Как можно это поправить? Чтобы на мобильных устройствах меню тоже выпадало (сейчас при клике оно выпадает, но сразу же переходит по ссылке на первом пункте). Если же это нереально, то как можно реализовать меню, чтобы оно было выпадающим и работало на всех устройствах (те примеры, что я находил через jquery, не подходят, т.к. там основные пункты меню не работают как ссылки, т.е. при клике на них меню просто выпадает, а нужен переход). Пример

Тут из пункта О компании выпадает Вакансии.


Ответ

Проблема актуальна, можно решать таким образом:

Hello
Даем объектам атрибут data-hover с наименованием класса, который отображает состояние hover этого элемента, в дополнение проверяем на ссылку, если ссылка то переходим "по второму клику".

Комментариев нет:

Отправить комментарий