Hover states allow you to change the styling of any element when the user's mouse cursor "hovers" over it.

Hover states can be set on individual elements, or via your global styles. If you want all page elements of a certain type to have the same hover effect, it's a good idea to use the Global Styles Panel.
​

Hover states can be added to any element on the page by selecting it, then toggling to hover mode in the top toolbar:

A banner at the top of the stage will help remind you when you're working in hover mode:

You'll also see an orange border around the element you're working with, and a small "editing hover state" indicator:

While you're in hover state, go ahead and make whatever style changes you want to the selected element. (Give it a border, change its color — whatever it is that you want the hover state to be.) If you want to have your text change on hover, make sure you select the text element, NOT the text directly.

The changes that you make will be applied only when users hover over the selected element.

When you're done, toggle back to "default" mode, or click "Exit Mode" in the banner at the top of the screen.

At the top of the global styles panel, the same toggle will allow you to switch between hover and default modes.

While in hover mode, any changes you make to the global styles will be applied when you hover on any element of that type. For example, if you set the color of <H1> text to red, then all <H1> text on your site will turn red when the user hovers the mouse over it. 

Hover states can accommodate any changes to the styling of the element -- color, stroke, size, padding, and so on -- but not to its position on the page, or to its content (you can't change the copy in a text element, for example.)