Как работает селектор :hover в CSS?

Селектор :hover в CSS позволяет применять стили к элементу при наведении на него курсора мыши. careerkarma.com ru.w3docs.com

Синтаксис: selector:hover { // CSS правила }. careerkarma.com В нём есть следующие компоненты: careerkarma.com

1. Selector — диапазон элементов, к которым будет применяться селектор :hover. careerkarma.com Например, если нужно, чтобы эффект срабатывал при наведении курсора на элемент h3, то указывается h3. careerkarma.com
2. :hover — указывает браузеру, что стили из правила CSS должны применяться только при наведении курсора на определённый элемент. careerkarma.com
3. CSS правила — это стили, которые должны применяться при наведении курсора на элементы, определённые селектором. careerkarma.com Например, можно указать размер шрифта для текста или цвет фона тега div. careerkarma.com

Селектор :hover часто используется для создания эффекта взаимодействия с элементом, например, при наведении на ссылку меняется цвет текста. htmlacademy.ru Также его применяют для создания эффектов анимации и визуальных изменений на сайте, например, при наведении на изображение можно увеличить его размер или добавить эффект тени. htmlacademy.ru