Псевдоклассы состояний (:hover, :active, :focus, :visited): Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

В этом разделе вы попрактикуетесь в использовании псевдоклассов состояний CSS: `:hover`, `:active`, `:focus` и `:visited`. Эти псевдоклассы позволяют применять стили к элементам в зависимости от их текущего состояния, например, при наведении курсора, активации (клике), получении фокуса или после того, как ссылка была посещена. Задания помогут вам закрепить навыки динамического изменения внешнего вида элементов для улучшения пользовательского взаимодействия.

Список тем

Эффект при наведении на кнопку

Сделайте так, чтобы при наведении курсора мыши на кнопку её фон становился темнее. Это базовый способ показать пользователю, что элемент интерактивен.

CSS

.interactive-button {
  padding: 10px 20px;
  border: none;
  background-color: #5cacee;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.interactive-buttoninput1 {
  background-color: #3b8cc4;
}

                     .interactive-button {
  padding: 10px 20px;
  border: none;
  background-color: #5cacee;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.interactive-buttoninput1 {
  background-color: #3b8cc4;
}

HTML

<button class="interactive-button">Наведи на меня</button>

Используйте псевдокласс `:hover`, чтобы применить стили к кнопке, когда на неё наведен курсор. Вам нужно добавить этот псевдокласс к селектору кнопки и указать свойство для изменения фона.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Активное состояние кнопки

Добавьте стиль для кнопки в момент нажатия (активации). Пусть фон кнопки становится еще темнее, чем при наведении, чтобы пользователь видел явный отклик на клик.

CSS

.action-button {
  padding: 10px 20px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.action-button:hover {
  background-color: #e0e0e0;
}

.action-buttoninput1 {
  background-color: #d0d0d0;
  border-color: #bbb;
}

                     .action-button {
  padding: 10px 20px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.action-button:hover {
  background-color: #e0e0e0;
}

.action-buttoninput1 {
  background-color: #d0d0d0;
  border-color: #bbb;
}

HTML

<button class="action-button">Нажми меня</button>

Используйте псевдокласс `:active`. Этот псевдокласс применяется к элементу в тот момент, когда он активирован пользователем (например, во время клика мыши по кнопке или ссылке).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Фокус на поле ввода

Измените стиль поля ввода `input`, когда оно получает фокус (когда пользователь кликает в него или переходит с помощью Tab). Сделайте так, чтобы рамка поля становилась синей.

CSS

.focusable-input {
  padding: 8px;
  border: 1px solid #ccc;
  transition: border-color 0.3s ease;
  outline: none; /* Убираем стандартный контур браузера */
}

.focusable-inputinput1 {
  border-color: #5cacee;
}

                     .focusable-input {
  padding: 8px;
  border: 1px solid #ccc;
  transition: border-color 0.3s ease;
  outline: none; /* Убираем стандартный контур браузера */
}

.focusable-inputinput1 {
  border-color: #5cacee;
}

HTML

<label for="username">Имя:</label>
<input type="text" id="username" class="focusable-input">

Псевдокласс `:focus` применяется к элементу, который в данный момент находится в фокусе. Добавьте этот псевдокласс к селектору поля ввода и измените свойство `border-color`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Стиль посещенной ссылки

Измените цвет текста ссылки после того, как пользователь перешел по ней (посетил). Пусть посещенные ссылки становятся серыми.

CSS

.history-link {
  color: #007bff;
  text-decoration: none;
}

.history-link:hover {
  text-decoration: underline;
}

.history-linkinput1 {
  color: #6c757d;
}

                     .history-link {
  color: #007bff;
  text-decoration: none;
}

.history-link:hover {
  text-decoration: underline;
}

.history-linkinput1 {
  color: #6c757d;
}

HTML

<a href="#" class="history-link">Это ссылка</a>
<p><small>(Для проверки кликните по ссылке)</small></p>

Используйте псевдокласс `:visited`. Он применяется к ссылкам (`<a>`), которые пользователь уже посещал. Обратите внимание, что из соображений безопасности возможности стилизации `:visited` ограничены (в основном, можно изменять свойства, связанные с цветом).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Подчеркивание ссылки при наведении

Добавьте эффект подчеркивания для ссылки только тогда, когда на нее наведен курсор мыши. Изначально ссылка не должна быть подчеркнута.

CSS

.hover-link {
  color: #dc3545;
  input1: none; /* Убираем подчеркивание по умолчанию */
}

.hover-link:hover {
  input1: underline;
}

                     .hover-link {
  color: #dc3545;
  input1: none; /* Убираем подчеркивание по умолчанию */
}

.hover-link:hover {
  input1: underline;
}

HTML

<a href="#" class="hover-link">Ссылка для наведения</a>

Используйте псевдокласс `:hover` для селектора ссылки (`a`). Внутри правила для `:hover` используйте свойство `text-decoration` со значением `underline`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Общий стиль для Hover и Focus

Примените одинаковый стиль к кнопке как при наведении курсора, так и при получении фокуса. Пусть в обоих случаях у кнопки появляется тонкая синяя рамка.

CSS

.styled-button {
  padding: 10px 15px;
  background-color: #28a745;
  color: white;
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color 0.3s ease;
  outline: none;
}

input1, 
input2 {
  border-color: #007bff;
}

                     .styled-button {
  padding: 10px 15px;
  background-color: #28a745;
  color: white;
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color 0.3s ease;
  outline: none;
}

input1, 
input2 {
  border-color: #007bff;
}

HTML

<button class="styled-button">Кнопка</button>

Чтобы применить одни и те же стили к разным состояниям, вы можете сгруппировать селекторы через запятую. Создайте правило, где селекторы `.styled-button:hover` и `.styled-button:focus` перечислены через запятую.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Изменение прозрачности изображения при наведении

Сделайте так, чтобы изображение становилось полупрозрачным при наведении на него курсора мыши.

CSS

.hover-image {
  display: block; /* Чтобы избежать лишних отступов */
  transition: opacity 0.3s ease;
  input1: 1; /* Полная непрозрачность по умолчанию */
}

.hover-imageinput2 {
  input1: 0.7;
}

                     .hover-image {
  display: block; /* Чтобы избежать лишних отступов */
  transition: opacity 0.3s ease;
  input1: 1; /* Полная непрозрачность по умолчанию */
}

.hover-imageinput2 {
  input1: 0.7;
}

HTML

<img src="https://naytikurs.ru/img/1.png" alt="Пример" class="hover-image" width="150">

Используйте псевдокласс `:hover` для селектора изображения (`img` или его класса). Внутри правила измените CSS-свойство `opacity`. Значение `1` означает полную непрозрачность, `0` - полную прозрачность.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Стилизация дочернего элемента при наведении на родителя

Сделайте так, чтобы при наведении курсора на контейнер (`div` с классом `parent-box`), текст внутри него (`p`) менял цвет на красный.

CSS

.parent-box {
  padding: 20px;
  border: 1px solid #eee;
  background-color: #f9f9f9;
  cursor: pointer;
}

.parent-box p {
  margin: 0;
  color: #333;
  transition: color 0.3s ease;
}

input1 p {
  color: #dc3545;
}

                     .parent-box {
  padding: 20px;
  border: 1px solid #eee;
  background-color: #f9f9f9;
  cursor: pointer;
}

.parent-box p {
  margin: 0;
  color: #333;
  transition: color 0.3s ease;
}

input1 p {
  color: #dc3545;
}

HTML

<div class="parent-box">
  <p>Наведите на блок</p>
</div>

Используйте комбинацию селекторов. Сначала укажите селектор родительского элемента с псевдоклассом `:hover` (`.parent-box:hover`), а затем через пробел укажите селектор дочернего элемента (`p`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Комплексные стили состояний для кнопки

Задайте разные стили для кнопки: при наведении курсора фон должен стать светлее, при нажатии (активации) — темнее и добавляться небольшая внутренняя тень, а при получении фокуса — появляться внешняя рамка.

CSS

.complex-button {
  padding: 12px 25px;
  background-color: #007bff;
  color: white;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.complex-buttoninput1 { /* Наведение */
  background-color: #3395ff;
}

.complex-buttoninput2 { /* Активация */
  background-color: #0056b3;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.complex-buttoninput3 { /* Фокус */
  border-color: #0056b3;
}

                     .complex-button {
  padding: 12px 25px;
  background-color: #007bff;
  color: white;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.complex-buttoninput1 { /* Наведение */
  background-color: #3395ff;
}

.complex-buttoninput2 { /* Активация */
  background-color: #0056b3;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.complex-buttoninput3 { /* Фокус */
  border-color: #0056b3;
}

HTML

<button class="complex-button">Кнопка</button>

Вам понадобятся три псевдокласса: `:hover` для наведения, `:active` для нажатия и `:focus` для фокуса. Для каждого состояния создайте отдельное CSS-правило с соответствующими стилями (`background-color`, `box-shadow`, `border`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Убрать стандартный контур фокуса и добавить свой

Для элемента `input` сначала уберите стандартный контур обводки, который браузер добавляет при фокусе, а затем добавьте свой собственный стиль фокуса: тень синего цвета.

CSS

.custom-focus-input {
  padding: 8px;
  border: 1px solid #ccc;
  input1: none; /* Убираем стандартный outline */
}

.custom-focus-inputinput2 {
  border-color: #aaa; /* Немного изменим границу для наглядности */
  input3: 0 0 5px rgba(0, 123, 255, 0.5);
}

                     .custom-focus-input {
  padding: 8px;
  border: 1px solid #ccc;
  input1: none; /* Убираем стандартный outline */
}

.custom-focus-inputinput2 {
  border-color: #aaa; /* Немного изменим границу для наглядности */
  input3: 0 0 5px rgba(0, 123, 255, 0.5);
}

HTML

<input type="text" class="custom-focus-input" placeholder="Введите текст">

Чтобы убрать стандартный контур, используйте свойство `outline` со значением `none` для элемента в обычном состоянии или состоянии `:focus`. Затем в правиле для `:focus` добавьте свойство `box-shadow` для создания эффекта свечения или тени.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Эффект 'подъема' кнопки при наведении

Добавьте кнопке эффект легкого 'подъема' при наведении курсора. Это можно сделать, немного сместив кнопку вверх и добавив тень.

CSS

.lift-button {
  padding: 10px 20px;
  border: none;
  background-color: #ffc107;
  color: #333;
  cursor: pointer;
  border-radius: 4px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.lift-buttoninput1 {
  input2: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

                     .lift-button {
  padding: 10px 20px;
  border: none;
  background-color: #ffc107;
  color: #333;
  cursor: pointer;
  border-radius: 4px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.lift-buttoninput1 {
  input2: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

HTML

<button class="lift-button">Поднимающаяся кнопка</button>

Используйте псевдокласс `:hover`. Для смещения примените свойство `transform` со значением `translateY()`, указав небольшое отрицательное значение (например, `translateY(-2px)`). Для тени используйте `box-shadow`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Интерактивная карточка с изображением

Создайте карточку с изображением и текстом. При наведении на всю карточку, изображение должно немного увеличиваться, а текст под ним менять цвет.

CSS

.card {
  border: 1px solid #ddd;
  padding: 15px;
  text-align: center;
  overflow: hidden; /* Чтобы увеличенное изображение не вылезало */
  cursor: pointer;
}

.card img {
  display: block;
  margin: 0 auto 10px;
  transition: transform 0.3s ease;
}

.card p {
  margin: 0;
  color: #555;
  transition: color 0.3s ease;
}

input1 img {
  transform: scale(1.1);
}

input1 p {
  color: #007bff;
}

                     .card {
  border: 1px solid #ddd;
  padding: 15px;
  text-align: center;
  overflow: hidden; /* Чтобы увеличенное изображение не вылезало */
  cursor: pointer;
}

.card img {
  display: block;
  margin: 0 auto 10px;
  transition: transform 0.3s ease;
}

.card p {
  margin: 0;
  color: #555;
  transition: color 0.3s ease;
}

input1 img {
  transform: scale(1.1);
}

input1 p {
  color: #007bff;
}

HTML

<div class="card">
  <img src="https://naytikurs.ru/img/4.png" alt="Картинка" width="150">
  <p>Наведите на карточку</p>
</div>

Используйте псевдокласс `:hover` на родительском элементе (карточке `.card`). Внутри этого правила стилизуйте дочерние элементы: для изображения (`img`) используйте `transform: scale()`, а для текста (`p`) — `color`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку