:hover :focus :active и :visited
Оформляйте интерактивные состояния ссылок и кнопок с помощью наиболее распространённых псевдоклассов CSS.
«:hover :focus :active и :visited» — бесплатный урок CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Что такое псевдоклассы?
Псевдоклассы выбирают элементы на основе их состояния или связи с другими элементами. Они начинаются с одного двоеточия : и не требуют добавления атрибутов в HTML.
:hover
:hover применяется, когда указатель пользователя находится над элементом. Это самый распространённый селектор интерактивного состояния.
<p><a href="#" class="demo-hover">Hover this link</a></p>
<div class="card demo-hover">Hover this card</div>
:focus
:focus применяется, когда элемент получает фокус (с помощью клавиши табуляции или программного перевода в фокус). Это важно для доступности.
<input type="text" placeholder="Auto-focused input" autofocus />
<button>Click me (focus me too)</button>
:focus-visible
:focus-visible — более интеллектуальная версия :focus: она показывает индикатор фокуса только при получении фокуса с клавиатуры, но не с помощью мыши. Это позволяет показывать пользователям клавиатуры индикаторы фокуса, не отображая их после щелчка мышью.
<button autofocus>Keyboard-focused button shows a ring</button>
:focus-within
:focus-within применяется к элементу, когда фокус получает любой из его дочерних элементов. Это удобно для стилизации контейнеров форм или строк поиска в активном состоянии.
<form class="search-form"><input type="search" placeholder="Search…" autofocus /></form>
:active
:active применяется во время активации элемента — при щелчке мышью или касании экрана. Это создаёт визуальную обратную связь для интерактивных элементов.
<button class="demo-active">Pressed button (demo state)</button>
:visited
:visited стилизует ссылки, которые пользователь уже посещал. Из-за ограничений, связанных с конфиденциальностью, с помощью :visited можно стилизовать только ограниченный набор свойств (color, background-color, border-color, outline-color).
<a href="#" class="demo-visited">Visited link</a>
Порядок состояний ссылок (LVHA)
При стилизации всех четырёх состояний ссылок соблюдайте порядок LVHA, чтобы избежать проблем со специфичностью: Lссылка, Vпосещённая, Hнаведение, Aактивация.
<p><a href="#">Unvisited (link)</a></p>
<p><a href="#" class="demo-visited">Visited</a></p>
<p><a href="#" class="demo-hover">Hover</a></p>
<p><a href="#" class="demo-active">Active</a></p>
Наведение на сенсорных устройствах
Сенсорные экраны не имеют состояния наведения так же, как мыши. :hover может ненадолго активироваться при касании. Для взаимодействий, предназначенных только для сенсорных устройств, используйте :active или медиазапрос @media (hover: none).
Сочетание состояний
Псевдоклассы можно объединять в цепочки, чтобы одновременно стилизовать несколько состояний:
<a href="#" class="demo-visited-hover">Visited link being hovered</a>
<button>Click-focused button gets no ring</button>
Плавные состояния при наведении
Создавайте плавные эффекты при наведении с помощью переходов в базовом состоянии (а не в состоянии :hover), чтобы переход выполнялся в обоих направлениях:
<button class="btn demo-hover">Hover transitions smoothly</button>
Быстрая проверка
Какой псевдокласс показывает стили фокуса только при навигации с клавиатуры, но не при щелчках мышью?
Повторение
:hover активируется при наведении указателя; :focus — при получении фокуса полем ввода; :active — во время щелчка; :visited — для посещённых ссылок. Используйте :focus-visible для индикаторов фокуса только при навигации с клавиатуры. Соблюдайте порядок LVHA для состояний ссылок. Для доступности всегда обеспечивайте видимые индикаторы фокуса.
Часто задаваемые вопросы
Урок «:hover :focus :active и :visited» бесплатный?
Да — полный текст урока «:hover :focus :active и :visited» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «:hover :focus :active и :visited»?
Оформляйте интерактивные состояния ссылок и кнопок с помощью наиболее распространённых псевдоклассов CSS. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «:hover :focus :active и :visited»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- :hover :focus :active и :visited
- :nth-child и :nth-of-type
- :not() :is() и :where()
- :checked :disabled и псевдоклассы состояния формы