Это используется для кнопок, текстовых ссылок, разделов вашего сайта, значков и многого другого. Если вы хотите, чтобы что-то меняло цвета, когда кто-то наводит на него курсор мыши, используйте тот же CSS, но добавьте :hover к нему и измените стиль. Эффекты наведения давно стали одним из простых способов добавить элемент интерактивности на сайт.
Чаще всего мы видим, что они используются для выделения текстовых ссылок или кнопок. С помощью CSS мы всегда можем создавать впечатляющие анимации. То есть вы можете четко указать, что вы хотите. Эффекты наведения — наиболее часто используемый анимационный эффект. Вы можете или сделать это простым или сделать его более интерактивным.
Вот пример:
Код
.entry h2{
font-size:36px;
color:#161617;
font-weight:800;
}
.entry h2:hover{
color:#e02424;
}
Что он делает, так это меняет цвет вашего тега h2 с черного на красный, когда кто-то наводит курсор на него. Преимущество использования: hover заключается в том, что вам не нужно снова объявлять размер шрифта или вес, если он не меняется. Это только меняет то, что вы указываете.
Переход:
Для эффектов при наведении, как в случае с меню или изображениями на вашем веб-сайте, не нужно слишком быстро привязывать цвета к конечному результату. В идеале вы хотите постепенно облегчить изменение, в которое вступает свойство перехода.
Код
.entry h2:hover{
color:#e02424;
transition: all 0.3s ease;
}
Это заставляет изменение произойти в течение 0,3 секунды, вместо того, чтобы просто мгновенно перейти к красному цвету. Это делает эффект парения более приятным для глаз и менее резким.
