Псевдокласс :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 ЭФФЕКТ