Hover interaction (legacy)

This article features the legacy interface for Interactions, which you can activate in the Designer by using the switch at the top of the Interactions Panel. To learn about the new Interactions Panel, head to our Interactions and Animations Course.

How to set up a hover interaction

The hover trigger lets you trigger an interaction when someone hovers their cursor over an object — usually a button. Like the click trigger, this is often used to cause another element on the page to animate.

With the hover trigger, you can set different effects for when the mouse pointer hovers over (or enters) the object and when they leave the object. 

You can also set up simple hover interactions using states and transitions.

Enter an object

The enter property includes the effect (or effects) that’ll happen when someone hovers their mouse over an object, similar to how a standard CSS hover interacts.

“Entering” a button

Leave an object

The leave property includes the effect (or effects) that you add to an object when the cursor leaves the hover (enter) state. 

‍“Leaving” a button