Style an element on hover

Use this guide to change how an element looks when the pointer is over it, when it has keyboard focus, or while it’s being clicked. The same steps work for :focus, :focus-visible, :focus-within, :active and :visited.

Edit an existing hover style

1. Select the element on the canvas.
2. On the Style tab, click the square state button next to the rule selector.
3. Choose :hover. A green dot next to a state means the element already has styles for it.
4. The canvas shows the hover look. Open the rule selector and pick the hover rule (for example .btn:hover), or stay on Style.
5. Change the properties you want. On Style, each change goes to whichever rule controls that property while hovered.
6. Click the state button and choose neutral to go back to the normal look.

Add a hover style where none exists

The Style tab edits state rules that already exist; it can’t create a new :hover rule.

1. Add an empty rule for the state to one of the project’s stylesheets, for example .btn:hover {}.
2. Select the element and force :hover as above. The new rule appears in the rule selector.
3. Pick it in the rule selector and set the properties you want, or set them on the Style target and move them into it with the row’s source dot — see Move a style to another rule.

Common variations

• Several elements. Select them all before forcing the state; it applies to every selected element.
• Styles that depend on a parent’s state. For a rule like .card:hover .title, select the card, not the title, and force :hover on it.

Troubleshooting

• The canvas doesn’t change. The element has no rules for that state; there’s no green dot next to it in the list.
• The state resets. It returns to neutral whenever you select another element or leave the Style tab.

Related

• Reference: Element state
• Explanation: How simulated element states work