UI Design
Hover State
A hover state is the visual change an element shows when the cursor moves over it, such as a button shifting color or an underline appearing on a link. It signals that the element can be interacted with.
Why it matters
Hover states reassure people that something is clickable before they commit to clicking. For beginners, they are an easy way to make an interface feel responsive and alive.
In depth
Hover only exists with a pointing device, so it does nothing on touchscreens — never hide essential actions behind it. A common mistake is relying on a color shift alone to signal that something is interactive; the element should look clickable before you hover, with the hover state as confirmation rather than the only clue. Pair it with a focus state so keyboard users get the same feedback.
Real-world example
On most websites, links turn a different color or gain an underline when you point at them, and buttons darken slightly to show they are ready to be pressed.
Hover, click, or tab to the button. Each state needs its own visible signal.
Related terms