Переходы с помощью :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.