Отключение стиля :hover на устройствах с touch в CSS

Быстрый ответ

Чтобы ограничить применение стилей :hover только для устройств, способных отличать наведение курсора от касания экрана, используйте медиазапрос @media (hover: hover):

@media (hover: hover) {
    .element:hover {
        background-color: blue; /* Здесь указывается желаемый эффект при наведении. */
    }
}

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

Использование медиазапросов для сенсорных устройств и устройств с поддержкой наведения

В веб-разработке важно предусмотреть использование интерфейса как с помощью мыши, так и при помощи касаний. Медиазапросы, отслеживающие особенности способов ввода, позволят создать удобное взаимодействие для всех пользователей:

@media (hover: none) and (pointer: coarse) {
    .element:hover {
        /* Пользователи сенсорных устройств оценят отсутствие нежелательных эффектов.*/
        background-color: inherit;
    }
}

С применением указанных медиазапросов мы избавляемся от стилей при наведении на сенсорных устройствах, применяя pointer: coarse для обозначения непрецизионного типа ввода и hover: none для указания, что наведение курсором отсутствует. Это упрощает взаимодействие пользователей с интерфейсом при использовании сенсорных устройств.

Работа со средами смешанного ввода

Существуют гибридные устройства, поддерживающие одновременно касания и мышь. Для них подойдет смешанный метод: с помощью JavaScript обнаруживаем первое касание, после чего добавляем класс, отключающий все стили :hover:

document.addEventListener('touchstart', function() {
    document.body.classList.add('touch-device'); /* Учтите, это сенсорное устройство! */
});

Тогда ваш CSS будет выглядеть так:

.touch-device .element:hover {
    /* Эффекты наведения отменяются */
    background-color: inherit;
}

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

Применение точных селекторов и обнаружение возможностей

Для достижения более тонкого взаимодействия на сенсорных устройствах необходимо использовать продвинутые селекторы и методы обнаружения возможностей:

@supports ((hover: hover) and (pointer: fine)) {
    .element:hover {
        background-color: blue; /* Элементы утонченности для современных устройств */
    }
}

Для гибкого решения вопросов совместимости, рекомендуется использовать библиотеку Modernizr, которая позволяет учитывать особенности, сложные для установления с помощью медиазапросов.

Визуализация

Отключение :hover на сенсорных устройствах и различные типы взаимодействия можно представить следующим образом:

Десктоп (🖥️): Реагирует на наведение, словно артист, исполняющий симфонию.

Сенсорное устройство (📱): Реагирует на касание без наведение, подобно барабанной партии.

Решение: Медиазапросы (🔍📝)

@media (hover: hover) {
  /* Для устройств с прецизионным вводом */
  .element:hover { 
    /* Дискретные стили наведения */
  } 
}

@media (hover: none) {
  /* Для прямого ввода */
  .element:hover { 
    /* Упрощенный интерфейс без эффектов наведения */
  }
}

Использование медиазапросов позволяет разграничить функционал раздельно для различных устройств в ваших проектах.

Постоянное совершенство взаимодействия и совместимости

Создание адаптивного дизайна залог успешного и удобного взаимодействия на всех типах устройств. В вашей стратегии обязательно должно быть:

• Применение медиафункций (pointer: coarse/fine) для адаптации дизайна под характеристики каждого устройства.
• Тестирование на различных браузерах и устройствах для проверки общей совместимости — к Вашим услугам такие инструменты, как, например, Microscope-BrowserStack или Petri-dish device testing.
• Использование наилучших практик и актуальных источников информации, таких как MDN Web Docs и "Can I Use", для получения свежих данных о поддержке медиафункций CSS.
• При использовании JavaScript для управления :hover обратите внимание на события взаимодействия устройств, чтобы переключение стилей было максимально эффективным.
• Не забывайте о старых версиях браузеров, которые могут не поддерживать некоторые современные технологии. Нужно уметь применять "plan B" или использовать новые методы, чтобы создать удобный интерфейс для всех пользователей.

Полезные материалы

1. Pointer events – Web APIs | MDN — Подробная информация о работе с разifferentными типами ввода.
2. Modernizr Documentation — Информация о Modernizr, инструменте, помогающем обеспечить поддержку функционала.
3. Pointer Events — Официальное руководство W3C по управлению эффектом hover на устройствах.
4. jquery – Detecting touch screen devices with Javascript – Stack Overflow — Примеры из сообщества Stack Overflow по определению сенсорных устройств.
5. Can I use... Support tables for HTML5, CSS3, etc — Таблицы совместимости для проверки поддержки CSS3 медиазапросов и других технологий.