Hover State
The visual appearance of an interactive element when the cursor is positioned over it.
Plain English
The hover state is the simplest way to communicate interactivity — it answers the question "can I click this?" When something changes on hover, the user knows it is clickable. When nothing changes, they are not sure. A subtle background colour shift, a slight shadow increase, an underline on a link — small changes that collectively teach users what is interactive on the page. The rule: every clickable element should have a visible, distinct hover state.
Technical
Triggered by the :hover CSS pseudo-class. Combine with transition for smoothness. For touch devices: hover states do not apply to touch (no cursor), so hover states are purely progressive enhancement — the element must be obviously interactive without hover. Common hover patterns: background-color shift (3–6% darker), box-shadow increase, transform: translateY(-2px) or scale(1.02), color change, border-color change, text-decoration: underline on links.
Live Demo
Card hover states
Default
Soft shadow at rest
Hover
Shadow lifts + translateY(-2px)
Button states
Default
Hover + press it
Every interactive element needs a hover state and an active/pressed state.
Usage
✓ Good usage
On nav links: colour changes from ink-600 to ink-900 on hover with 150ms transition. On cards: shadow lifts from soft to elevated with translateY(-2px).
✗ Bad usage
No hover state on a text link — users cannot tell if it is a link or plain text without hovering over it (and getting no feedback).
Recommended values
- Background shift: 4–6% darker than default (use darker shade from scale)
- Shadow upgrade: from soft to lifted shadow
- Transform lift: translateY(-2px) on cards
- Colour transition: accent-600 on accent-500 default
- Link underline: text-decoration: underline (or underline offset: 2px)
- Transition duration: 100–150ms ease-out
Common mistakes
- No hover state on clickable elements — fails the "is this interactive?" question.
- Hover states that are too drastic — a 20% size increase on hover is jarring.
- Removing the cursor: pointer on interactive elements — always use cursor: pointer on elements that behave like buttons or links.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Every interactive element must have a hover state. Cards: shadow lifts + translateY(-2px). Buttons: background 10% darker. Nav links: text colour darkens + underline. All transitions at 150ms ease-out. Clickable elements always use cursor: pointer.