За стиль элемента при наведении на него курсора мыши отвечает свойство :hover. Например, вот как сделать, чтобы цвет ссылки менялся с зелёного на коричневый.
a { color:green; }
a:hover { color:brown; }
Сама смена цвета или других параметров, если они указаны, происходит мгновенно и чтобы сделать её плавной, к селектору a следует добавить свойство transition. В качестве значения указываем время перехода от одного цвета к другому. К примеру, здесь время перехода занимает полсекунды.
a { color:green; transition: 0.5s; }
a:hover { color:brown; }
Для ссылок таким методом допустимо менять параметры шрифта, цвет текста, фона, толщину рамки, её цвет и некоторые другие характеристики. Учтите, что не все свойства вообще можно таким способом анимировать. Если у свойства есть дискретные значения, то никакой плавности не ожидайте. Например, свойству text-decoration можно присвоить значение none или underline. Это означает, что ссылки могут находиться только в двух состояниях: с подчёркиванием и без него.
В примере 1 показано добавление линии снизу через border-bottom. Первоначально толщина линии равна нулю, поэтому она у ссылок не отображается. При наведении на ссылку курсора мыши толщина линии плавно увеличивается до трёх пикселей.
Пример 1. Использование border-bottom
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ссылки</title>
<style>
a {
color:green; /* Цвет ссылок */
text-decoration: none; /* Убираем подчёркивание */
border-bottom: 0 solid red; /* Параметры линии снизу */
transition: 0.2s; /* Время перехода */
}
a:hover {
color:brown; /* Цвет ссылок при наведении */
border-bottom-width: 3px; /* Толщина линии снизу */
}
</style>
</head>
<body>
<p><a href="page/1.html">Крокодил Гена</a>
<p><a href="page/2.html">Чебурашка</a>
<p><a href="page/3.html">Шапокляк</a>
</body>
</html>
Таким же образом можно изменить не только цвет текста, но и цвет фона, или одновременно и то и другое. В примере 2 при наведении курсора на ссылку происходит смена цвета фона с серого на синий.
Пример 2. Использование background
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ссылки</title>
<style>
a {
color: #666; /* Серый цвет текста */
background: #ededed; /* Синий цвет фона */
padding: 5px; /* Расстояние от текста до края */
transition: 0.5s; /* Время перехода */
}
a:hover {
color: #fff; /* Белый цвет текста */
background: #0078a5; /* Синий цвет фона */
}
</style>
</head>
<body>
<p><a href="page/1.html">Крокодил Гена</a>
<p><a href="page/2.html">Чебурашка</a>
<p><a href="page/3.html">Шапокляк</a>
</body>
</html>
Кроме непосредственной замены значений свойств ссылки можно трансформировать через свойство transform. Сюда входят всякие искажения, вроде поворота, масштабирования, смещения и др. Вот как будет выглядеть одновременный поворот и сдвиг при наведении (пример 3).
Пример 3. Использование transform
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ссылки</title>
<style>
a {
display: inline-block; /* Строчно-блочный элемент */
transition: 0.3s; /* Время перехода */
}
a:hover {
transform: rotate(3deg) translate(5px); /* Трансформация */
}
</style>
</head>
<body>
<p><a href="page/1.html">Крокодил Гена</a>
<p><a href="page/2.html">Чебурашка</a>
<p><a href="page/3.html">Шапокляк</a>
</body>
</html>
Свойство transform не работает непосредственно для строчных элементов, которыми ссылки являются по умолчанию. Поэтому их надо превратить в блочные или строчно-блочные элементы через свойство display со значением inline-block.
Для понимания работы свойства display рекомендуем пройти курс Блочные и строчные элементы.
Использование псевдоэлементов
Псевдоэлемент создаётся при помощи ключевых слов ::before и ::after, которые слитно пишутся после имени селектора. Сам псевдоэлемент представляет собой подэлемент, который вставляется до или после содержимого самого элемента. В случае ссылок:
- a::before — подэлемент до содержимого элемента <a>;
- a::after — после содержимого элемента <a>.
Сам код HTML остаётся исходным, никаких дополнительных частей к ссылкам мы не прибавляем, само формирование псевдоэлементов выполняется через CSS. Вот как их можно представить:
a::before — <a>[Псевдоэлемент]Содержимое</a>
a::after — <a>Содержимое[Псевдоэлемент]</a>
Псевдоэлементы расширяют возможности по дизайну, поскольку к ним можно применять разнообразное стилевое оформление и они управляются независимо от самого элемента, оставаясь к нему привязанным.
В примере 4 показано добавление красной линии толщиной в один пиксель ниже текста ссылки через псевдоэлемент ::after.
Пример 4. Использование ::after
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ссылки</title>
<style>
a {
position: relative; /* Относительное позиционирование */
text-decoration: none; /* Убираем подчёркивание */
}
a::after {
content: ''; /* Пустое содержимое */
position: absolute; /* Абсолютное позиционирование */
left: 0; /* Положение левого края */
bottom: 0; /* Располагается внизу */
background-color: red; /* Цвет фона псевдоэлемента */
z-index: -1; /* Располагается позади текста */
width: 100%; /* Занимает всю ширину */
height: 1px; /* Высота псевдоэлемента */
}
</style>
</head>
<body>
<p><a href="page/1.html">Крокодил Гена</a>
<p><a href="page/2.html">Чебурашка</a>
<p><a href="page/3.html">Шапокляк</a>
</body>
</html>
Давайте построчно разберём данный код CSS.
content: '';
Свойство content добавляет содержимое к псевдоэлементу и без него наш дальнейший код работать не будет. Пустые кавычки показывают, что содержимого как такового нет, поскольку нам требуется только цветной прямоугольник без какого-либо текста внутри.
position: relative + position: absolute
Эта комбинация у элемента и псевдоэлемента позволяет задавать его положение относительно краёв элемента через свойства left, top, right и bottom.
Для понимания работы свойства position рекомендуем пройти курс Позиционирование элементов.
left: 0; bottom: 0
Псевдоэлемент располагается по левому и нижнему краям элемента <a>.
background-color: red
Цвет фона псевдоэлемента, в данном случае красный.
z-index: -1
Псевдоэлемент выводится поверх текста ссылки и своим фоном может перекрывать его. Чтобы этого не случилось, по оси Z располагаем псевдоэлемент ниже.
width: 100%
Ширина нашего псевдоэлемента. Из-за пустого содержимого подэлемент будет нулевой ширины и высоты, поэтому эти параметры следует задать явно.
height: 1px
Желаемая высота псевдоэлемента. Поскольку нам нужна линия толщиной в один пиксель, это же значение указываем в свойстве height. Если поставить 2px, то толщина линии, соответственно, будет два пикселя.
Созданную таким образом линию можно анимировать при наведении на ссылку курсора мыши, меняя нужные нам параметры. Но уже не у самого a::after, а у селектора a:hover::after.
В примере 5 при наведении на ссылку линия снизу увеличивается на всю высоту ссылки.
Пример 5. Изменение псевдоэлемента ::after при наведении
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ссылки</title>
<style>
a {
position: relative; /* Относительное позиционирование */
text-decoration: none; /* Убираем подчёркивание */
padding: 3px; /* Пространство от рамки до текста */
}
a::after {
content: ''; /* Пустое содержимое */
position: absolute; /* Абсолютное позиционирование */
left: 0; /* Положение левого края */
bottom: 0; /* Располагается внизу */
background-color: khaki; /* Цвет фона псевдоэлемента */
z-index: -1; /* Располагается позади текста */
width: 100%; /* Занимает всю ширину */
height: 1px; /* Высота псевдоэлемента */
transition: 0.3s; /* Время перехода */
}
a:hover::after {
height: 100%; /* Высота псевдоэлемента */
}
</style>
</head>
<body>
<p><a href="#">Леонардо</a></p>
<p><a href="#">Донателло</a></p>
<p><a href="#">Микеланджело</a></p>
<p><a href="#">Рафаэль</a></p>
</body>
</html>
Заметьте, что здесь transition добавляется к селектору a::after, потому что именно псевдоэлемент меняет свои параметры при наведении.
Схожим образом можно делать и другие эффекты, взяв за основу пример 2 и незначительно меняя в нём некоторые свойства и значения. Вот линия толщиной три пикселя, движущаяся слева направо.
a::after {
width: 0; /* Линия не видна */
height: 3px; /* Высота линии */
}
a:hover::after {
width: 100%; /* Линия занимает всю ширину */
}
Если у height поставить 100%, то это будет уже не линия, а фон под ссылкой.
a::after {
width: 0; /* Фон не виден */
height: 100%; /* Вся высота */
}
a:hover::after {
width: 100%; /* Весь фон */
}
Использование градиента
Интересные эффекты при наведении получаются при использовании линейного градиента. Он делается следующим образом.
background-image: linear-gradient(to left, red, blue)
В параметрах функции linear-gradient() сперва указывается направление градиента (в данном случае to left означает влево), затем начальный и конечный цвета. Если эти цвета задать одинаковыми, то получим однотонный фон без всякого градиента.
Градиент является фоновым изображением, поэтому к нему применимы следующие стилевые свойства:
Задавая у <a> через background-size нулевой размер фона, мы его тем самым сперва скрываем, и через значение 100% отображаем (пример 6).
Пример 6. Движение градиента слева направо
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ссылки</title>
<style>
a {
color:#666;
background-image: linear-gradient(to right, #feffff, #a0d8ef); /* Параметры градиента */
background-repeat: no-repeat; /* Фон не повторяется */
background-size: 0 100%; /* Градиент пока не показываем */
border: 1px solid #b7b7b7; /* Параметры рамки */
border-radius: 4px; /* Радиус скругления углов */
text-decoration: none; /* Убираем подчёркивание */
padding: 5px 15px; /* Расстояние от */
transition: 0.3s; /* Время перехода */
}
a:hover {
background-size: 100% 100%; /* Отображаем градиент */
}
</style>
</head>
<body>
<p><a href="page/1.html">Крокодил Гена</a>
<p><a href="page/2.html">Чебурашка</a>
<p><a href="page/3.html">Шапокляк</a>
</body>
</html>
Задать разное направление движения градиента можно через комбинацию свойств background-position, которое определяет начальную позицию фона, и background-size, устанавливающее размер фона. В табл. 1 показан код CSS, его надо включить в пример 6 для получения желаемого движения градиента.
Табл. 1. Комбинация свойств
| Направление движения |
CSS |
| Слева направо. |
a {
background-size: 0 100%;
}
|
| Справа налево. |
a {
background-size: 0 100%;
background-position: right;
}
|
| Снизу вверх. |
a {
background-size: 100% 0;
background-position: bottom;
}
|
| Сверху вниз. |
a {
background-size: 100% 0;
}
|
| От центра влево и вправо. |
a {
background-size: 0 100%;
background-position: center;
}
|
| От центра вверх и вниз. |
a {
background-size: 100% 0;
background-position: center;
}
|
| От левого нижнего угла к правому верхнему. |
a {
background-size: 0 0;
background-position: left bottom;
}
|
Как видите, вариантов множество. Комбинируя разные свойства и значения можно получить интересные эффекты анимации при наведении на ссылку.
Схожим образом делается градиентная линия, меняющая свои параметры при наведении на элемент. В примере 7 возле ссылок отображается прямоугольник размером 10×2 пикселя. При наведении курсора мыши на ссылку прямоугольник увеличивается на всю ширину ссылки.
Пример 7. Создание линии через градиент
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ссылки</title>
<style>
a {
background-image: linear-gradient(to right, #352384, #e90b8b); /* Параметры градиента */
background-repeat: no-repeat; /* Фон не повторяется */
background-size: 10px 2px; /* Линия будет шириной 10px и высотой 2px */
background-position: left bottom; /* Положение в левом нижнем углу */
padding-bottom: 2px; /* Расстояние от текста до линии */
text-decoration: none; /* Убираем подчёркивание */
transition: 0.3s; /* Время перехода */
}
a:hover {
background-size: 100% 2px; /* Линия занимает всю ширину */
}
</style>
</head>
<body>
<p><a href="page/1.html">Крокодил Гена</a>
<p><a href="page/2.html">Чебурашка</a>
<p><a href="page/3.html">Шапокляк</a>
</body>
</html>
Итоги
- За стиль элемента при наведении на него курсора мыши отвечает псевдокласс :hover.
- Плавный переход от одного значения к другому при наведении делается с помощью свойства transition, которое устанавливает время перехода.
- :hover можно комбинировать с псевдоэлементами ::before и ::after для добавления к ссылке дополнительного декоративного оформления.
- Схожего результата можно добиться, используя фон, созданный с помощью линейного градиента. Меняя параметры фона можно добиться различных эффектов при наведении курсора на ссылку.
Перейти к заданиям
Автор: Влад Мержевич
Последнее изменение: 24.04.2023