При использовании псевдокласса :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.