Состояние элемента и контекстные селекторы
Контекстные селекторы позволяют менять стили дочерних элементов при разных состояниях родительского блока. Например, можно сделать так, чтобы при наведении на карточку менялся фон и скругление элементов внутри нее. Разберемся, как с ними работать.
Смотрите видео:
https://vk.com/video-219751701_456239239
Что такое контекстные селекторы
Контекстные селекторы — это способ управления стилями дочерних элементов в зависимости от состояния родительского блока. Они позволяют создавать интерактивные элементы, которые реагируют на действия пользователя.
У каждого элемента есть состояние, которое вы можете задать в правой панели, и контекстные селекторы работают через них. Например, можно добавить элементу состояние При наведении.
После этого вы сможете настраивать стили дочерних элементов, которые будут применяться, когда пользователь наводит курсор на родительский блок.
Посмотрим на примере карточки с элементами внутри — изображением, текстами и кнопкой. Сделаем анимацию кнопки и изображения.
Как при наведении на карточку поменять скругление кнопки внутри нее
Шаг 1. Добавьте состояние для карточки
Выберите родительский блок (карточку) и добавьте ему состояние При наведении в правой панели.
Шаг 2. Добавьте нужные стили для кнопки
Для начала выберите кнопку. Вы увидите сообщение, что редактирование класса недоступно. Так и должно быть — теперь вы управляете стилем кнопки через состояние родительского блока.
Теперь задайте для кнопки нужные стили. Например, скругление.
Этот стиль не привяжется к классу кнопки. Чтобы вернуться к редактированию класса кнопки, нужно выбрать родительский блок и переключить его обратно в состояние По умолчанию — теперь вы сможете его редактировать.
Шаг 3. Добавьте плавности анимации
В состоянии При наведении у карточки — выберите кнопку. Далее добавьте для кнопки свойство Переходы, нажав на +.
Теперь переключитесь на состояние По умолчанию у карточки и также добавьте свойство Переходы для кнопки.
Готово! Кнопка плавно скругляется при наведении на карточку.
Как анимировать картинку при наведении на карточку
Шаг 1. Выберите состояние для карточки
Выберите карточку и переключите ее в состояние При наведении.
Шаг 2. Добавьте нужные стили для изображения
Выберите изображение и задайте ему размер 110% с каждой стороны.
Далее задайте отрицательные отступы (-5% сверху и слева) для равномерного увеличения.
Шаг 3. Добавьте плавности анимации
В состоянии При наведении у карточки и выберите изображение. Далее добавьте для изображения свойство Переходы, нажав на +.
Теперь переключитесь на состояние По умолчанию у карточки и также добавьте свойство Переходы для изображения.
Готово! Изображение плавно увеличивается при наведении на карточку.
Преимущества контекстных селекторов — они позволяют анимировать практически любой параметр в панели стилей.
Резюме
Анимация дочерних элементов при наведении на родительский блок:
- Переключите родительский блок в состояние При наведении.
- Настройте стили дочерних элементов в этом состоянии.
- Для плавности анимации добавьте свойство Переход у дочерних элементов в обоих состояниях родительского блока (По умолчанию и При наведении).
Важно: Для редактирования обычных стилей элемента нужно переключиться на состояние По умолчанию родительского блока.