Webstacker

Твой онлайн-журнал с мира Web и Front End: Новости, статьи и гайды на русском

Эффект наведения (:hover) на смартфонах и планшетах

  • Вещает
  • Опубликовано:
  • Изменено:
Эффект наведения (:hover) на смартфонах и планшетах

Немного истории

С введением CSS2 разработчики получили возможность визуализировать наведения на объекты страницы с помощью псевдокласса :hover . Это внесло больше динамики, визуального восприятия страницы и стало неотъемлемым атрибутом каждого современного сайта.

Поддержка и использование

На данный момент, этот псевдокласс поддерживается любым современным браузером, что позволяет его свободно использовать. Для Internet Explorer 6 (IE6) данный псевдокласс работает только для ссылок <a>. Синтаксис псевдокласса достаточно прост: Селектор: hover {}

:hover и тач-устройства

На тач-устройствах отсутствует эффект наведения, ведь здесь нет курсора. Управление осуществляется с помощью пальцев, это запрещает использовать :hover. Но с помощью Javascript можно активировать поддержку :hover при прикосновении на объект, где используется данный псевдокласс. Просто и лаконично, это можно сделать одной строкой в ​​Вашем js-файле, с подключенной библиотекой jQuery , которая используется на большинстве сайтов.

$('body').bind('touchstart', function () {});

Реализация на Pure Javascript:

document.body.addEventListener('touchstart', function () {});

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

Также подписывайтесь на наш офигенный Телеграм-канал 🤘: постим крутые статьи, авторские мнения, новости и шутки из мира Web-разработки. Понравилась статья? Расскажи об этом друзьям!