Симуляция эффекта hover на сенсорных устройствах

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

Чтобы имитировать эффекты наведения на сенсорных экранах, воспользуйтесь JavaScript для добавления и удаления CSS-класса на событиях touchstart и touchend. Ниже приведён пример для быстрой реализации:

// Спасение мира в одном касании... или двух!
document.querySelectorAll('.simulated-hover').forEach(element => {
  element.addEventListener('touchstart', () => element.classList.add('on-hover'));
  element.addEventListener('touchend', () => element.classList.remove('on-hover'));
});

Добавьте в данную реализацию соответствующий CSS-стиль, привязав класс из JavaScript к CSS:

.on-hover, .simulated-hover:hover {
  /* Дополните данный хэш-код своими стилями, необходимыми для создания эффекта 'hover' */
}

Укажите класс .simulated-hover тем HTML-элементам, для которых необходимо имитировать наведение на сенсорных устройствах. Это будет давать визуальный отклик пользователям сенсорных экранов, аналогичный событию наведения курсора мыши.

Погружение: Принципы работы

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

Использование событий касания в jQuery

С помощью jQuery мы можем удобно привязывать события касания к элементам и изменять их классы:

// Больше значит лучше (как в данном случае с jQuery)!
$('.simulated-hover').on('touchstart', function() {
  $(this).addClass('on-hover'); // Зафиксировали 'hover'!
}).on('touchend touchmove', function() {
  $(this).removeClass('on-hover'); // И потеряли 'hover'!
});

Чистоту кода обеспечиваем с помощью удаления класса 'on-hover', при отсутствии касания или сдвиге пальца. Это создает плавый пользовательский интерфейс.

Подробнее об этом расскажет наш спикер на видео

Предотвращаем нежелательное выделение и подсветку

Цель стилизации – это не только создание эстетичного интерфейса, но и предотвращение нежелательных эффектов, таких как выделение текста или подсветка при касании:

.simulated-hover {
  -webkit-user-select: none; /* Текст как бы говорит: "Не трогай меня!" */
  -webkit-tap-highlight-color: transparent; /* Видите ли вы меня сейчас? Конечно, нет! */
}

Наведение + Касание = Единая команда

Мы поддерживаем принцип доступности. Так почему бы нам не объединить устройства с различными возможностями?

function toggleHoverState(event) {
  // Играем в прятки со стилем наведения!
  event.target.classList.toggle('on-hover');
}

document.querySelectorAll('.simulated-hover').forEach(element => {
  element.addEventListener('mouseenter', toggleHoverState); // Добро пожаловать на наш вечер!
  element.addEventListener('mouseleave', toggleHoverState); // До свидания, будем рады снова Вас видеть!
  element.addEventListener('touchstart', toggleHoverState);
  element.addEventListener('touchend', toggleHoverState);
});

Теперь события mouseenter и mouseleave работают вместе с touchstart и touchend, обеспечивая элегантное взаимодействие для всех видов устройств.

Не забываем о долгом тапе, вызывающем контекстное меню

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

const LONG_TOUCH_DURATION = 500; // Ничего не торопим, всё вдумчиво!

$('.simulated-hover').on('touchstart', function(event) {
  this.timeout = setTimeout(() => {
    $(this).addClass('on-hover'); // Присваиваем класс
  }, LONG_TOUCH_DURATION);
}).on('touchend touchmove', function(event) {
  clearTimeout(this.timeout);
  $(this).removeClass('on-hover'); // Удаляем класс!
});

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

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

Воспринимайте эффект наведения на сенсорных экранах как поднятие флага при взаимодействии пользователя с элементом:

Сенсорный экран (📱): [Элемент 1, Элемент 2*, Элемент 3]

Уже при нажатии (тапе 👆) флаг элемента поднимается вверх (🚀):

👆 = Тап (касание)
🚀 = Статус наведения активирован!

До тапа:             [🏳️, 🏳️, 🏳️]
После тапа:      [🏳️, 👆🚀, 🏳️]

Примечание: Для достижения такого эффекта вовсе не требуется магической палочки, достаточно научиться качественно использовать интуитивные тапы!

Создание надёжной симуляции эффекта наведения

Пора задуматься: Активация без наведения

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

$('.interactive-element').on('click', function() {
  // Время для действий! Забудьте про наведение. Пора работать с AJAX!
  loadData(this.dataset.url);
});

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

Оптимальное решение: Наведение и активное состояние

В некоторых случаях достаточно использовать псевдокласс ':active', который идеально подходит для интерактивных элементов, таких как кнопки:

.simulated-hover:active {
  /* Здесь применимы стили наведения, радушно встречающие пользователя */
}

Увлекательные взаимодействия с длительными триггерами касания

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

let touchTimer;

$('.simulated-hover').on('touchstart', function() {
  touchTimer = setTimeout(function() {
    // Эффект наведения включен!
  }, 800); // Чем дольше задержка, тем более заметно наведение!
}).on('touchend touchcancel touchmove', function() {
  clearTimeout(touchTimer); // Стоп эффекту наведения
});

Такой подход способствует созданию ясных и продуманных взаимодействий, имитирующих аккуратное наведение курсора мыши.

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

1. :hover – CSS: Cascading Style Sheets | MDN — Глубоко детализированный справочник по псевдо-классу CSS :hover.
2. css – Changing :hover to touch/click for mobile devices – Stack Overflow — Статус знатока от пользователей о том, как смоделировать наведение на сенсорных экранах.
3. Touch Events — Золотой стандарт событий касания, предоставляемый W3C.
4. TouchEvent – Web APIs | MDN — Энциклопедия Mozilla по описанию событий касания в JavaScript — незаменимый ресурс для разработчиков мобильных веб-приложений.