Переходы с помощью :hover

При использовании псевдокласса :hover изменение стиля, к примеру, цвета фона, происходит мгновенно. Для плавной смены свойств предназначены переходы, которые делаются с помощью свойства transition — оно позволяет задать продолжительность и метод перехода.

Для начала рассмотрим простой пример, когда плавно меняется цвет ссылок при наведении на них курсора.

a { color: green; transition: 1s; }
a:hover { color: red; }

Сперва задаём исходный цвет ссылок с помощью свойства color, добавляя его к селектору A. Там же вставляем свойство transition со значением времени перехода, в частности, 1s — это одна секунда. Ниже создаём стилевые правила с псевдоклассом :hover, которые будут применяться к ссылкам при наведении на них курсора мыши. Теперь смена цвета ссылок с красного на зелёный, и наоборот, будет происходить плавно в течение одной секунды. Чтобы задать время перехода, просто поменяйте значение transition (пример 1). Можно вставлять дробные числа (0.8s) или миллисекунды (800ms), помня, что в одной секунде тысяча миллисекунд (1s = 1000ms).

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>:hover</title> <style> a { color: green; /* Цвет ссылок */ transition: 0.5s; /* Время перехода */ } a:hover { color: red; /* Цвет ссылки при наведении */ } </style> </head> <body> <p><a href="#">Uno</a> | <a href="#">Dos</a> | <a href="#">Tres</a></p> </body> </html>

Результат данного примера показан на рис. 1.

Изменение цвета ссылки при наведении

Рис. 1. Изменение цвета ссылки при наведении

Переходы можно добавлять не только к текстовым ссылкам, но и к другим элементам веб-страницы. В сочетании со свойством transform, задающим трансформацию, это позволяет делать разные эффекты. В примере 2 показан блок <div> с картинкой внутри, при наведении на которую картинка увеличивается в масштабе. Для этого в стилях для <div> используем свойство overflow со значением hidden, чтобы картинка при увеличении не выходила за пределы блока. К img добавляем свойство transition, а для img:hover задаём свойство transform.

Пример 2. Масштабирование картинки при наведении

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>:hover</title> <style> div { display: inline-block; /* Строчно-блочный элемент */ overflow: hidden; /* Обрезаем содержимое за пределами блока */ } div img { display: block; /* Убираем отступ снизу */ transition: 1s; /* Переход 1 секунда */ } div img:hover { transform: scale(1.2); /* Увеличиваем картинку */ } </style> </head> <body> <div><img src="image/squirrel.jpg" alt="Белка"></div> </body> </html>

Результат данного примера показан на рис. 2.

Увеличение картинки при наведении

Рис. 2. Увеличение картинки при наведении

Здесь применяется строчно-блочный элемент, чтобы размеры <div> соответствовали вставленной в него картинке. У изображений внутри блоков появляется небольшой отступ снизу, убираем его с помощью свойства display, добавляя его к селектору img.

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 11.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты