Как игнорировать стили CSS :hover на устройствах с сенсорным экраном

Задача: решение проблем с отображением при наведении на сенсорных устройствах

Свойство CSS :hover добавляет интерактивный стиль к элементам при наведении курсора мыши. Однако это создает проблему на сенсорных устройствах, где нет понятия наведения. Это может привести к неожиданному поведению или нарушениям зрения при взаимодействии пользователей с элементами на сенсорном экране.

Решения:

1. Удаление стилей :hover из JavaScript

С помощью JavaScript можно удалить все правила CSS, содержащие :hover, фактически отключив это свойство на сенсорных устройствах. Однако у этого метода есть недостатки:

• Требуются модификации CSS и проблемы совместимости в старых браузерах.
• Отключает эффекты наведения на смешанных устройствах ввода (например, Surface, iPad Pro), ухудшая UX .

2. Медиа-запросы только для CSS

Включение правил :hover в блоки @media может отключить эффекты наведения на сенсорных устройствах. Однако этот подход:

• Ограничен iOS 9.0 и современными браузерами на Android.
• Нарушает эффекты наведения в старых браузерах или требует переопределения всех правил наведения, что влияет на гибкость.

3. Обнаружение JavaScript и добавление CSS в начало

Обнаруживая сенсорный ввод с помощью JavaScript, в тело документа можно добавить специальный класс (например, hasHover). Затем ко всем правилам :hover можно добавить этот класс, чтобы отключить эффекты наведения на сенсорных устройствах. Хотя этот метод работает хорошо, он по-прежнему сталкивается с проблемами на устройствах смешанного ввода.

4. Динамическое обнаружение наведения и переключение классов

Этот метод сочетает в себе обработку событий JavaScript и манипулирование классами для динамического переключения эффектов наведения. Он включает эффекты наведения при обнаружении курсора мыши и отключает их при возникновении события касания. Этот подход обеспечивает наиболее надежное решение, работающее в широком спектре браузеров и устройств ввода.