Состояние элемента и контекстные селекторы

Контекстные селекторы позволяют менять стили дочерних элементов при разных состояниях родительского блока. Например, можно сделать так, чтобы при наведении на карточку менялся фон и скругление элементов внутри нее. Разберемся, как с ними работать.

Смотрите видео:

https://vk.com/video-219751701_456239239

VK Видео | YouTube | Rutube

Что такое контекстные селекторы

Контекстные селекторы — это способ управления стилями дочерних элементов в зависимости от состояния родительского блока. Они позволяют создавать интерактивные элементы, которые реагируют на действия пользователя.

У каждого элемента есть состояние, которое вы можете задать в правой панели, и контекстные селекторы работают через них. Например, можно добавить элементу состояние При наведении.


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

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

Карточка в обычном состоянии и при наведении на нее курсора

Как при наведении на карточку поменять скругление кнопки внутри нее

Шаг 1. Добавьте состояние для карточки

Выберите родительский блок (карточку) и добавьте ему состояние При наведении в правой панели.

Добавляем состояние При наведении для карточки

Шаг 2. Добавьте нужные стили для кнопки

Для начала выберите кнопку. Вы увидите сообщение, что редактирование класса недоступно. Так и должно быть — теперь вы управляете стилем кнопки через состояние родительского блока.

Выбираем кнопку — теперь она стилизуется в контексте карточки

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

Задаем кнопке радиус скругления

Этот стиль не привяжется к классу кнопки. Чтобы вернуться к редактированию класса кнопки, нужно выбрать родительский блок и переключить его обратно в состояние По умолчанию — теперь вы сможете его редактировать.

Выбираем карточку и переключаем ее в состояние По умолчанию

Снова выбираем кнопку — теперь можно редактировать ее класс

Шаг 3. Добавьте плавности анимации

В состоянии При наведении у карточки — выберите кнопку. Далее добавьте для кнопки свойство Переходы, нажав на +.


Добавляем Переходы для кнопки в состоянии карточки При наведении

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


Добавили Переходы для кнопки в состоянии карточки По умолчанию

Готово! Кнопка плавно скругляется при наведении на карточку.


Как анимировать картинку при наведении на карточку

Шаг 1. Выберите состояние для карточки

Выберите карточку и переключите ее в состояние При наведении.

Переключаем карточку в состояние При наведении

Шаг 2. Добавьте нужные стили для изображения

Выберите изображение и задайте ему размер 110% с каждой стороны.

Задаем размер изображения 110% по ширине и высоте

Далее задайте отрицательные отступы (-5% сверху и слева) для равномерного увеличения.

Добавляем отрицательные отступы в свойстве Позиционирование

Шаг 3. Добавьте плавности анимации

В состоянии При наведении у карточки и выберите изображение. Далее добавьте для изображения свойство Переходы, нажав на +.

Добавили Переходы для изображения в состоянии карточки При наведении

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

Добавили Переходы для изображения в состоянии карточки По умолчанию

Готово! Изображение плавно увеличивается при наведении на карточку.

Преимущества контекстных селекторов — они позволяют анимировать практически любой параметр в панели стилей.

Резюме

Анимация дочерних элементов при наведении на родительский блок:

  1. Переключите родительский блок в состояние При наведении.
  2. Настройте стили дочерних элементов в этом состоянии.
  3. Для плавности анимации добавьте свойство Переход у дочерних элементов в обоих состояниях родительского блока (По умолчанию и При наведении).

Важно: Для редактирования обычных стилей элемента нужно переключиться на состояние По умолчанию родительского блока.