On selecting an element, theStates section is visible in theVisual Inspector. Pressing on the '+' icon will open a dropdown with all possible state options based on the selected element's type.
The states that we currently support are:hover,active,focus,focus-within,focus-visible,checked,visited anddisabled which are based on CSS pseudo-classes. If you want to find out more about what each state is used for you can refer to the official documentationhere. When selecting a state from the dropdown list, it will be added in theStates section and automatically enabled so you can start editing styles right away. The enabled status is indicated by the purple color of the label and the fixed message at the bottom of the page.Unselecting a state can be done simply by pressing again on the selected state label or by pressingCancel on the fixed message from the button of the page.
When a state is enabled, any style changes you're making from the Inspector will be added on the selected state. The changes will always be visible in Canvasas long as you have the element and the state selected. The styling changes you make are what users will see when they interact with this element.​
You can also add new styles from theAdvanced Inspector. A separate section will be created for each existing state where you can easily see, edit or delete styles.
Everyone likes a smooth transition, so when adding a state we set a0.3s transition on the element. The transition property will only be interactive when you preview or deploy your website but not in the Canvas.
Preview an existing state
The final behaviour after applying the states and styles can be checked by going on thePreview button. This will open a new tab where you can inspect the result.
Deleting an existing state
On hovering over an existing state, a close button will appear. Pressing on it will delete the state. Another option is to right click on a state label and chooseDeletefrom the context-menu.
States and media queries
Currently, all styles applied on a state are independentand there is no possibility to apply specific state styles on a media query. Likewise, if a media query is enabled and also a state is selected, any changes from Inspector will be added on the selected interaction state, without considering the enabled media query.