States and Context Selectors

You can style each element in different states. For example, on hover, when active or in focus. This way you can create micro-animations that make your website more interactive and dynamic.

You can add an element state in the Design tab. To do this, open the drop-down menu in the States section and select the desired option.

To style different element states, select states from the list one by one. 

Let's change the transparency of the element in the On Hover state.



You can style both the element itself in its different states and its child elements. For example, when you hover over a card, you can change the background color of the button inside it.

1. Add a state you need to the parent element.

Example: On Hover state.

2. Select a child element. In the Design tab, next to the States setting, a yellow Context label No1 will appear. This way you apply one Context Selector to the child element.

A yellow label will be displayed on the canvas with the name of the parent element and its state, in the context of which the styles are defined (Div Block:Hover).

3. Assign styles you need to the child element. For example, change the background color.

4. Check in preview. When you hover over the card, the button changes color.

If you delete the state from the parent element, all styles in the context of this state will also be deleted for child elements.

Context Selectors can have unlimited nesting, as they are determined by the level of nesting of elements in each other.

Let's look at the container with cards:

For any state of the parent element, you can style multiple child elements.

For example, when hovering over the card, you can change the styles for two child elements: text color for the text block and background color for the button.

When you hover over the card, the text color and the background color of the button change.

To do this:

1. Select the card and assign the On Hover state. 

2. Select the text element. I will have a context selector label. Set styles for the element that will apply when hovering over the card — change the text color.

3. Select the button. It will have a context selector label. Assign the button styles that will apply when hovering over the card — change the background color.

You can change the styles of the element depending on:

For example, with the third option, you can create the following effects for the button: 

When you hover over the card, the button's background color changes.

When you hover over the button, outline appears.

To do this, follow these steps:

1. The first steps are the same as in Example 1. Here, you style the button in the context of the card.

2. Next, you need to add a state to the button. Add the On Hover state to the button.

3. Assign your button some on hover styles — add an outline.

Done! The button has effects when hovering over the card and the button itself.

Here, nesting property of context selectors is used — the styles of the element depend on the state of its parents.

Let's create the following effects:

To do this, follow these steps:

1. The first steps are the same as in Example 2. Here, you style the button in the context of the card + the button itself.

2. Next, style the text on the button. Select the text element inside the button. It will have label 2 Context (dual context). Also add labels of two parent elements on the canvas, the state of which will determine the styles of the text element (card and button).

Assign the styles to the text, which will apply when hovering over the button. The text color changes.

You can use context selectors to create a variety of micro-animations. You can make elements appear and disappear, change their sizes, move, and so on.

Here are two examples::

1. When hovering over the card hidden elements appear.

For example, when hovering over the product card, you can show additional information and the button, and when hovering over the button, its color changes.

You can do it by adding a context selector to the additional block, which is triggered when hovering over the card. The opacity and motion properties are used to create the block appearance effect.

2. Creating tooltips

You can make a block with a tooltip that appears when you hover over the icon.

To do this, you can use a context selector that is triggered when you hover over the icon, and also the resize and opacity settings.

You can watch our stream for more details on the above examples. 

To make styles change smoothly when changing the state, you need to use the Transitions settings.

1. For the selected state, add Transitions in the Appearance section.

2. Set the transition duration in milliseconds and select the easing type.

Both context selectors and animations can be used to create interactive effects. But there are differences: