Все про hover css эффект при наведении

Илья Ландар

Сайты, трафик, маркетинг

Все про hover css эффект при наведении

Hover html

Автор

Илья Ландар

На чтение

2

Просмотров

20 просмотров

Опубликовано

11.04.2020
Время на прочтение: 2 минут(ы)

Псевдокласс :hover — создан для изменение css свойств при наведении мышки на html объект.

У hover есть две основных цели

  • Связь пользователя и сайта
  • Косметическая

Связь пользователя и сайта

Разберем пример у нас есть кнопка. Но у нее есть свой уникальный дизайн и возможно она не похожа на привычную как для пользователя кнопку. Благодаря hover эффекту мы можем показать пользователю, «Мы кнопка, нажми на нас» и тем самым мы улучшаем связь пользователя и сайта.

Косметическая

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

  • Использование псевдокласса :hover
  • Антагонист псевдокласса :hover
  • Практический пример использования
  • Видео про HOVER ЭФФЕКТЫ

Использование псевдокласса :hover

Все очень просто используем или html тэг или селектор и добавляем к нему :hover. При наведение цвет текста внутри div будет меняться на красный

div:hover{color: red}

Антагонист псевдокласса :hover

У нашего, «Ховера». Есть свой антагонист и он делает все наоборот. Выглядит он и используется вот так

div:not(:hover){color: red}

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

Практический пример использования

See the Pen BTN HOVER by Illlya (@Ineye) on CodePen.

Видео про HOVER ЭФФЕКТ

Илья Ландар

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

Вам так же может понравиться

< 1 мин

3 просмотров

Уменьшаем вес картинок для оптимизации сайта

Время на прочтение: < 1 минуты Для начала нам нужно понять зачем нам уменьшать вес картинок. Связь такая. Меньше вес

< 1 мин

3 просмотров

Wow js анимация при появлении.

Время на прочтение: < 1 минуты Что бы сделать анимацию при появлении нам нужно. Github — для скачивания архив wowjs

2 мин

9 просмотров

Просто о сео. Тех часть.

Время на прочтение: 2 минут(ы) При знакомстве с сео, сразу осознаешь что это целая наука которая полностью не изучена

< 1 мин

18 просмотров

Css центрирование. Просто выравниваем блоки.

Время на прочтение: < 1 минуты В верстке часто возникает вопрос центрирования. Расскажу в этой статье как я выравниваю блоки