Как применять hover-эффекты в Elementor только на устройствах с курсором

Почему hover может залипать на смартфоне

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

Если с :hover связаны transform, box-shadow, изменение цвета, opacity или показ дополнительного контента, после касания пользователь может увидеть нежелательное состояние. Особенно заметно это на карточках, меню, кнопках и блоках с наложенным текстом.

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

• hover: hover — устройство поддерживает наведение, которое можно использовать как обычный hover.
• pointer: fine — основной указатель достаточно точный, как у мыши или стилуса.

Как добавить условие для hover в Custom CSS Elementor

Откройте настройки нужного элемента в Elementor и добавьте CSS в поле Custom CSS, если эта возможность доступна в вашей конфигурации. В Elementor для текущего элемента используется служебный селектор selector. Он автоматически подставляется вместо конкретного класса или идентификатора блока.

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

• Выберите именно тот контейнер, виджет или кнопку, к которым должен применяться эффект.
• Оставьте transform: none и исходную тень в базовом состоянии.
• Добавьте transition к базовому селектору, чтобы анимация работала плавно.
• Разместите selector:hover только внутри @media (hover: hover) and (pointer: fine).

selector {
  transform: none;
  box-shadow: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  selector:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.13);
  }
}

Как добавить доступное состояние для клавиатуры

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

Для этого используйте :focus-visible. В отличие от простого :focus, этот псевдокласс позволяет показывать визуальный индикатор именно в ситуациях, когда он нужен при навигации с клавиатуры. Для кнопок и ссылок обычно достаточно контура или другого четкого выделения.

Если карточка является ссылкой или кнопкой, состояние фокуса можно оформить отдельно от hover. Не стоит полагаться только на изменение тени или цвета: индикатор должен быть достаточно контрастным и заметным на фоне.

• Применяйте :focus-visible к ссылкам, кнопкам и другим элементам, которые можно активировать.
• Не убирайте стандартный outline без полноценной замены.
• Обычному декоративному контейнеру состояние фокуса не нужно, если он не участвует во взаимодействии.

selector:focus-visible {
  outline: 3px solid #1d70f7;
  outline-offset: 3px;
}

Вариант для карточки с интерактивной ссылкой

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

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

• У карточки должен быть понятный текст ссылки или название действия.
• Все важные действия должны быть доступны без наведения.
• Проверьте, не перекрывает ли transform соседние карточки или кнопку.
• Если карточка увеличивается, оставьте достаточное расстояние между элементами.

selector {
  transform: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  selector:hover,
  selector:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.13);
  }
}

selector:focus-visible {
  outline: 3px solid #1d70f7;
  outline-offset: 3px;
}

Типичные ошибки при настройке

Чаще всего проблема возникает из-за неправильного размещения CSS или слишком широкого условия. Например, selector:hover, добавленный без медиазапроса, будет доступен и на сенсорных устройствах. А проверка только pointer: fine не гарантирует, что устройство действительно поддерживает hover в нужном формате.

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

Не используйте :active как замену hover без проверки сценария. :active описывает момент нажатия или активации, а не наведение. В некоторых случаях это может быть уместно для мобильных кнопок, но такое состояние не заменяет логику постоянного hover.

• Не вставляйте selector в глобальный CSS темы или плагина: это служебный синтаксис Elementor.
• Если CSS добавляется в файл темы, замените selector на реальный класс, например .card.
• Не делайте важный контент доступным только после наведения.
• Не применяйте сложные hover-анимации к каждому элементу страницы без необходимости.
• После изменений очистите кеш сайта, CDN и браузера, если старые стили продолжают отображаться.

Как проверить результат на разных устройствах

Проверки только в редакторе Elementor или в режиме эмуляции браузера не всегда достаточно. Эмуляция меняет размер viewport, но не всегда полностью воспроизводит поведение сенсорного ввода. Поэтому после настройки желательно протестировать страницу на реальном смартфоне или планшете.

Наведите курсор на элемент с компьютера, отведите его и убедитесь, что состояние возвращается к исходному. Затем откройте страницу на смартфоне, коснитесь карточки или кнопки и проверьте, не остается ли она приподнятой или подсвеченной.

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

• Десктоп: наведение, отведение курсора, повторное наведение.
• Смартфон: первое касание, повторное касание, прокрутка страницы.
• Планшет или гибридное устройство: проверка как с сенсорным вводом, так и с мышью.
• Клавиатура: навигация с помощью Tab, активация клавишей Enter или пробелом, видимый focus-visible.
• Разные браузеры: проверка того, не меняется ли поведение состояний после обновления страницы.