Переходы с помощью :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. Плавное изменение цвета ссылок
Результат данного примера показан на рис. 1.
Рис. 1. Изменение цвета ссылки при наведении
Переходы можно добавлять не только к текстовым ссылкам, но и к другим элементам веб-страницы. В сочетании со свойством transform, задающим трансформацию, это позволяет делать разные эффекты. В примере 2 показан блок <div> с картинкой внутри, при наведении на которую картинка увеличивается в масштабе. Для этого в стилях для <div> используем свойство overflow со значением hidden, чтобы картинка при увеличении не выходила за пределы блока. К img добавляем свойство transition, а для img:hover задаём свойство transform.
Пример 2. Масштабирование картинки при наведении
Результат данного примера показан на рис. 2.
Рис. 2. Увеличение картинки при наведении
Здесь применяется строчно-блочный элемент, чтобы размеры <div> соответствовали вставленной в него картинке. У изображений внутри блоков появляется небольшой отступ снизу, убираем его с помощью свойства display, добавляя его к селектору img.
См. также
- :focus на мобильных устройствах
- transform
- transition
- Виды ссылок
- Всплывающая подсказка
- Использование :hover
- Несколько псевдоэлементов
- Нормальное позиционирование
- Переходы
- Переходы и анимация
- Повёрнутые рамки
- Подсветка строк и колонок таблицы
- Псевдокласс :hover
- Псевдоклассы в CSS
- Работа с типографикой
- Селекторы CSS
- Сочетание с псевдоклассами
- Трансформация
- Трансформация
- Трансформация в CSS
- Функции трансформации