Prerequisites

The.com Basics CSS

Intro

Adding state styles for hover, focus, visited, and pseudo selectors to elements can help communicate to your users that things on the webpage are interactable.

UX Options State Editing Mode

Click the UX icon to bring up the Toggle UX Options menu. You can then choose to switch to a state or pseudo selector editing mode.

You'll notice that the Toolbar turns blue to indicate that you are on an alternate editing mode.

With the state mode active, the style grid will be blank, meaning that there are no hover styles set up for that Element. Editing is the same as before, but the edits are scoped to only apply when that state is active.

Remember to switch back to the States editing mode when you're done editing the hover state!

Bonus: Use the transition property to give it some life.