Як застосувати 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.
• Різні браузери: перевірка, чи не змінюється поведінка станів після оновлення сторінки.