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:

Activate hover state
Style element in hover state
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.

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.

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.



To learn more about interaction states check out this article.

Updated on: 12/05/2023