> ## 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 add a hover effect to an element

**Adding hover effects in TeleportHQ is easy to do and is a simple way to make your project pop. Here’s how to do it:**

|    |    |    |
| --- | --- | --- |
| [1. Activate hover state](#2-activate-hover-state) | [2. Style element in hover state](#2-style-element-in-hover-state) | [3. Removing the hover state](#2-removing-the-hover-state) |

## Activate hover state

To activate the hover state on an element, select the element, then go in the **Right panel** to the **States** section and click the **“+” button** to add a new state.

From the dropdown list select the hover option and you will immediately be able to edit your element and its hover state. 

![Adding hover state on an element](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/1-adding-hover-effect_1yzpnzh.gif)

## Style element in hover state

|| You can distinguish that you are editing the hover state from the notification in the lower part of the canvas.

Once the hover state is activated you can start restyling the editor just like usual, using the visual options in the **Right panel**.

You can enable and disable editing on the hover state at any time by going to the **States** section and clicking on the **hover state icon**, or with a click on the button in the notification from inside the canvas.

![Editing element in the hover state](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/2-editing-hover-effect_cmt4zy.gif)

## Removing the hover state

To remove the hover state on an element go to the **Right panel**, in the **States** section and find the hover icon. Click on the **X (close) button** that shows on it to remove it.

![Removing the hover state](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/3-removing-hover-state_1neow7e.gif)

To learn more about interaction states check out this [article](/en/article/interaction-states-afa84d/).