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

Стили элемента в разных состояниях

Каждый элемент можно стилизовать в разных состояниях — например, при наведении курсора мыши, активном или в фокусе. Это позволяет создавать интересные микро-анимации, которые сделают сайт более живым и динамичным.

Состояние элемента можно добавить на вкладке Дизайн. Для этого откройте выпадающий список в разделе Состояния и выберите нужную опцию.

Чтобы стилизовать различные состояния элемента, поочерёдно выбирайте состояния из списка.

Например, изменим прозрачность элемента в состоянии «при наведении».

Видео: Как стилизовать кнопку при наведении

Контекстные селекторы: стилизация дочерних элементов

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

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

1. Добавьте нужное состояние родительскому элементу. Например, «При наведении».

2. Выберите дочерний элемент. На вкладке Дизайн рядом с настройкой Состояния появится желтая метка Контекст с цифрой 1. Она обозначает, что к дочернему элементу применен один контекстный селектор.

На холсте будет отображаться желтая метка с названием родительского элемента и его состоянием, в контексте которого определяются стили (Div Block:Hover).

3. Задайте дочернему элементу нужные стили. Например, измените цвет фона.

4. Проверьте работу на предварительном просмотре. При наведении на карточку кнопка меняет цвет.

Удаление состояния у родительского элемента

Если у родительского элементам удалить состояние — то удалятся и все стили, заданные в контексте этого состояния у дочерних элементов.

Уровни вложенности контекстных селекторов

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

Посмотрим на примере контейнера с карточками:

Карточка — дочерний элемент для контейнера. Ее можно стилизовать в контексте контейнера — например, при наведении на контейнер у карточки появится обводка.

Кнопка — дочерний элемент сразу двух родителей — контейнера и карточки. Поэтому ее можно стилизовать в двух контекстах. Например, при наведении на контейнер у кнопки можно изменить цвет фона, а при наведении на карточку — добавить обводку.

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

Пример 1. Стилизация нескольких дочерних элементов у одного родителя

Для любого состояния родительского элемента можно стилизовать несколько дочерних элементов.

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

Для этого выполните следующие шаги

1. Выберите карточку и добавьте ей состояние «При наведении».

2. Выберите текстовый элемент — у него появится метка контекстного селектора. Задайте элементу стили, которые сработают при наведении на карточку, — измените цвет текста.

3. Выберите кнопку — у нее появится метка контекстного селектора. Задайте кнопке стили, которые сработают при наведении на карточку, — измените цвет фона.

Пример 2. Стилизация элемента в контексте родителя + собственного состояния

Вы можете менять стили элемента в зависимости от:

Его собственного состояния.

Состояния его родителя.

Комбинации состояния родителя + собственного состояния.

Например, при использовании третьего варианта можно сделать такие эффекты для кнопки:

При наведении на карточку (родительский элемент) меняется цвет фона кнопки — (как в Примере 1).

При наведении на саму кнопку — у нее дополнительно добавляется обводка.

Для этого выполните следующие шаги:

1. Первые шаги — как в Примере 1. На этом этапе вы добавите стилизацию кнопки в контексте карточки.

2. Далее нужно работать с состоянием самой кнопки. Добавьте кнопке состояние «При наведении».

3. Задайте кнопке стили, которые сработают при наведении на нее, — добавьте границы.

Пример 3. Стилизация элемента в контексте нескольких родительских элементов

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

Например, сделаем следующие эффекты:

При наведении на карточку меняется цвет фона кнопки (как в Примере 1).

При наведении на кнопку у нее появляется обводка (как в Примере 2) и дополнительно меняется цвет текста внутри нее.

Для этого выполните следующие шаги:

Первые шаги — как в Примере 2. На этом этапе вы добавите стилизацию кнопки в контексте карточки + самой кнопки.

2. Далее нужно работать с текстом на кнопке. Выберите текстовый элемент внутри кнопки. У него появится метка 2 Контекст (двойной контекст), а на холсте — метки двух родительских элементов, от состояния которых будут зависеть стили текстового элемента (карточки и кнопки).

Задайте тексту стили, которые сработают при наведении на кнопку, — измените цвет текста.

Другие примеры использования контекстных селекторов

Вы можете использовать контекстные селекторы для реализации множества вариантов микро-анимаций. Можно сделать эффекты появления или скрытия элементов, изменения их размеров, перемещения и другие.

Вот два примера реализации:

1. При наведении на карточку — появление на ней ранее скрытых элементов.

Например, при наведении на карточку с товаром можно показать дополнительную информацию и кнопку, а при наведении на кнопку — изменить ее цвет.

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

2. Создание тултипов.

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

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

Подробнее о том, как реализовать эти примеры, можно посмотреть в нашемстриме на Youtube.

Плавные переходы при изменении состояний

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

1. Для выбранного состояния добавьте свойство Переходы в разделе Внешний вид.

2. Настройте длительность перехода в миллисекундах и выберите тип смягчения.

В чем разница между использованием контекстных селекторов и анимаций

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

Эффекты. Контекстные селекторы дают возможность изменять любые css-свойства элементов — например, размер, цвет фона и текста, границы, тени и другие. Анимации позволяют делать ограниченный набор эффектов — изменение размера, наклона, масштабирования, непрозрачности, а также движение и поворот.

Возможность использования. Контекстные селекторы работают только для вложенных друг в друга элементов. Анимации можно настроить для любых элементов на странице.

Триггеры анимации. Контекстные селекторы используются только для состояний элементов (при наведении, активный, в фокусе). Анимации можно использовать для создания эффектов при клике, при появлении элемента и при скролле страницы.

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