2.1 Псевдокласс :hover
Псевдоклассы состояния позволяют применять стили к элементам на основе их взаимодействия с пользователем или их текущего состояния. Эти псевдоклассы часто используются для улучшения пользовательского интерфейса, предоставляя визуальную обратную связь на действия пользователя.
Псевдокласс :hover применяется к элементу, когда пользователь наводит на него курсор мыши.
Синтаксис:
селектор:hover {
свойства: значения;
}
Пример:
В этом примере ссылка изменяет цвет и добавляет подчеркивание при наведении курсора, а кнопка меняет цвет фона и текста.
/* Стилизация ссылки при наведении */
a:hover {
color: red;
text-decoration: underline;
}
/* Стилизация кнопки при наведении */
button:hover {
background-color: #3498db;
color: white;
}
2.2 Псевдокласс :focus
Псевдокласс :focus применяется к элементу, когда он получает фокус, например, при нажатии на элемент формы или при переходе к нему с помощью клавиши Tab.
Синтаксис:
селектор:focus {
свойства: значения;
}
Пример:
В этом примере поле ввода изменяет цвет границы и убирает обводку при фокусе, а текстовое поле меняет цвет фона.
/* Стилизация поля ввода при фокусе */
input:focus {
border-color: blue;
outline: none;
}
/* Стилизация текстового поля при фокусе */
textarea:focus {
background-color: #f0f0f0;
}
2.3 Псевдокласс :active
Псевдокласс :active применяется к элементу в момент его активации пользователем, например, при нажатии кнопки мыши. Этот псевдокласс часто используется для создания визуальной обратной связи при нажатии на элементы интерфейса.
Синтаксис:
селектор:active {
свойства: значения;
}
Пример:
В этом примере ссылка изменяет цвет в момент нажатия, а кнопка меняет цвет фона и немного уменьшается, создавая эффект нажатия.
/* Стилизация ссылки в момент нажатия */
a:active {
color: green;
}
/* Стилизация кнопки в момент нажатия */
button:active {
background-color: #2980b9;
transform: scale(0.98);
}
2.4 Псевдокласс :visited
Псевдокласс :visited применяется к ссылкам, которые пользователь уже посещал. Он позволяет стилизовать посещенные ссылки отличным образом от непосещенных.
Синтаксис:
селектор:visited {
свойства: значения;
}
Пример
В этом примере посещенная ссылка изменяет цвет на пурпурный, чтобы отличаться от непосещенных ссылок:
/* Стилизация посещенной ссылки */
a:visited {
color: purple;
}
2.5 Комбинирование псевдоклассов
Псевдоклассы состояния можно комбинировать для создания сложных интерактивных стилей. Например, можно задать различные стили для ссылок в зависимости от их состояния.
Пример полной реализации
В этом примере стилизация ссылок меняется в зависимости от их состояния: базовое состояние, посещенные ссылки, ссылки при наведении и ссылки в момент нажатия:
/* Базовый стиль для ссылок */
a {
color: blue;
text-decoration: none;
}
/* Стилизация посещенной ссылки */
a:visited {
color: purple;
}
/* Стилизация ссылки при наведении */
a:hover {
color: red;
text-decoration: underline;
}
/* Стилизация ссылки в момент нажатия */
a:active {
color: green;
}
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ