Работа с эффектами наведения курсора CSS

Селектор :hover
Селектор :hover определят стиль элемента при наведении курсора мыши. Этот селектор можно использовать для всех элементов, а не только для ссылок. Псевдокласс CSS :hover запускается, когда пользователь наводит указатель мыши на элемент.

Селектор :hover
Стили, определяемые активами псевдо-класса, будут переопределены любым последующим классом. Например, :link, :active или :visited, который имеет хотя бы один равный атрибут. Поэтому используйте псевдокласс hover после :link и :visit, но перед :active.

Пример ссылок с разными стилями:
Добавляем гипер-ссылки на веб-страницу
Move your mouse over links to notice the changes.
This link will change its color
This link will change its font-size
This link will change its background-color
This link will change its font-family
This link will change its text-decoration

Пример ссылок с разными стилями:
Добавляем css-стиль для гипер-ссылок на веб-страницу
<br>a.model1:hover, a.model1:active</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Пример ссылок с разными стилями: Добавляем css-стиль для гипер-ссылок на веб-страницу a.model1:hover," loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/1072851/slide-4.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/1072851/slide-4.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/1072851/slide-4.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/1072851/slide-4.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/1072851/slide-4.jpg" class="slides-image"><!----><div class="slides-content">{color: purple;} <br>a.model2:hover, a.model2:active {font-size: 210%;} <br>a.model3:hover, a.model3:active {background: yellow;} <br>a.model4:hover, a.model4:active {font-family: arial;} <br>a.model5:visited, a.model5:link {text-decoration: none;} <br>a.model5:hover, a.model5:active {text-decoration: underline;} <br>

Пример применения псевдокласса к элементу
. Эффект проявляется при наведении курсора на элемент
:
Добавляем строку текста и блок на веб-страницу
Please, hover over me!
This is the expected result

Пример применения псевдокласса к элементу
. Эффект проявляется при наведении курсора на элемент
:
Добавляем стиль для строки и блока на веб-страницу
<br>div { background-color: pink; padding: 30px; display: none; font-size: 40px; } <br>span:hover + div { display: block; }

Уменьшение интенсивности цвета
Добавляем на веб-страницу блок с классом decolor
DECOLOR

Уменьшение интенсивности цвета
Подключаем шрифт Lato.

Уменьшение интенсивности цвета
Добавляем css-стиль для всех блоков
<br>body > div {</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Уменьшение интенсивности цвета Добавляем css-стиль для всех блоков body &gt; div {" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/1072851/slide-9.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/1072851/slide-9.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/1072851/slide-9.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/1072851/slide-9.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/1072851/slide-9.jpg" class="slides-image"><!----><div class="slides-content">margin:121px 149px; width:483px; height:298px; background:#676470; color:Grey; font-family:Lato; font-weight:900; font-size:3.4em; text-align:center; line-height:298px; transition:all 0.3s; } <br>.decolor { opacity:0.5; } <br>.decolor:hover { opacity:1; } <br>

Увеличение ширины и высоты
Добавляем на веб-страницу блок с классом grow
Grow Effect

Увеличение ширины и высоты
Добавляем ссылку на шрифт и стиль
<br>body > div { margin:121px 149px; width:483px; height:298px; background:#676470; color:Gainsboro ; font-family:Helvetica; font-weight:900; font-size:3.4em; text-align:center; line-height:298px; transition:all 0.3s; } <br>.grow:hover { -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); } <br>

Вращение элемента
Добавляем на веб-страницу блок с классом rotate
Rotate Effect

Вращение элемента
Добавляем ссылку на шрифт и стиль в секцию head type="text/css">
<br>body > div { margin:121px 149px; width:483px; height:298px; background:#676470; color:Gainsboro ; font-family:Helvetica; font-weight:900; font-size:3.4em; text-align:center; line-height:298px; transition:all 0.3s; } <br>.rotate:hover { -webkit-transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg); transform: rotateZ(-30deg); }

Изменение формы элемента
превращение круглого элемента в квадратный и наоборот
Добавляем на веб-страницу блок с классом circle
Square to circle

Изменение формы элемента
превращение круглого элемента в квадратный и наоборот
Добавляем ссылку на шрифт и стиль в секцию head
<br>body > div { margin:121px 149px; width:483px; height:298px; background:#676470; color:Gainsboro ; font-family:Helvetica; font-weight:900; font-size:48px; text-align:center; line-height:298px; transition:all 0.3s; } <br>.circle:hover { border-radius:70%; }

Изменение цвета границ
Добавляем на веб-страницу блок с классом border
BORDER