> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.teleporthq.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to use Interaction states (ex: hover, focus, active)

**Add styles to your elements based on states such as: focus, hover or active.**

|   |   |   |   |
| ---- | ---- | ---- |
| [1. Style an element in a state](#2-1-style-an-element-in-a-state) | [2. Preview state behavior](#2-2-preview-an-existing-state) | [3. Deleting an existing state](#2-3-deleting-an-existing-state) | [4. States and media queries](#2-4-states-and-media-queries) |

## 1. Style an element in a state

On selecting an element, the States section is visible in the **Right panel -> Visual tab**. Pressing on the **'+' icon** will open a dropdown with all possible state such as [hover](/en/article/how-to-add-a-hover-effect-to-an-element-d6pdoz/), *active, focus, focus-within, focus-visible, checked, visited* and *disabled*, which are based on CSS pseudo-classes

When selecting a state from the dropdown list, it will be added in the **States 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.

To unselect a state simply press again on the selected state label or press **Cancel** on the fixed message from the button of the page.

When a state is enabled, any style changes you're making from the Right panel will be added on the selected state. The changes will always be visible in Canvas **as 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.

| When adding a state, we set a 0.3s transition on the element. The transition property will only be interactive when you preview or deploy your website but not in the Canvas.

![Adding and editing an interaction state](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/1-interaction-states_1drbi0q.gif)

## 2. Preview an existing state

The final behavior after applying the states and styles can be checked by going on the **Preview button** *. This will open a new tab where you can inspect the result.*

![Previewing interaction states](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/2-previewing-interaction-state_1htaddp.gif)

## 3. Deleting an existing state

On hovering over an existing state, a **close button** ( x ) will appear. Pressing on it will delete the state.
Another option is to right click on a state label and choose **Delete** from the context-menu.

## 4. States and media queries

Currently, all **styles applied on a state are independent** and 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.