Hover States

Hover states provide visual feedback when a cursor is over an interactive element, signaling clickability and enabling progressive disclosure.

stellae.design

Design Principles

Hover states are visual changes triggered when a mouse cursor moves over an interactive element. They signal interactivity, preview actions, enable progressive disclosure, and provide spatial orientation. Desktop-only — touch has no cursor. Must never be the sole access path; they're an enhancement layer.

Why It Matters

Hover states are visual changes that occur when a user positions their cursor over an interactive element, providing immediate feedback that an element is clickable, draggable, or otherwise actionable. They serve as a critical affordance layer in desktop interfaces, helping users distinguish interactive elements from static content and building confidence that clicking will produce a predictable result. Without hover states, interfaces feel unresponsive and users must rely on guesswork to identify which elements are interactive, increasing error rates and slowing task completion.

Real-World Examples

GitHub's button and link hover system

GitHub uses consistent hover treatments across its interface — buttons subtly darken, links gain underlines, and interactive list items receive a light background highlight. The transitions are fast enough to feel immediate but smooth enough to avoid flickering as the cursor traverses a dense interface. The consistency across hundreds of interactive elements means users develop a reliable mental model of what is clickable within minutes of using the platform.

Stripe's documentation interactive code blocks

Stripe's documentation uses hover states on code blocks to reveal a copy button and on API parameter rows to highlight the active row and show inline documentation links. The hover effects are subtle — a slight background tint and smooth fade-in of secondary actions — keeping the reading experience clean while making interactive elements discoverable on demand. This layered revelation prevents visual clutter in dense technical content while ensuring functionality is always within reach.

Counter-example

Navigation menu that only appears on hover

A corporate website hides its entire secondary navigation behind a hover-triggered mega menu on the main navigation bar, with no click alternative and no mobile fallback. Desktop users with motor impairments who cannot hold the cursor steady within the menu boundary watch it repeatedly close as their cursor drifts outside the hit area. Mobile users see no secondary navigation at all because the hover trigger has no touch equivalent, effectively hiding half the site's content from the majority of its traffic.

Role-Specific Guidance

Common Mistakes

• The most frequent mistake is relying on hover states as the only way to access information or functionality, making those features completely invisible on touch devices and inaccessible to keyboard users. Teams also commonly apply hover effects inconsistently — buttons have hover states but links do not, or some cards respond to hover while identical-looking cards elsewhere do not — creating confusion about what is interactive. Another common error is adding overly aggressive hover animations with large scale transforms or color shifts that create a distracting, carnival-like experience as the user simply moves their cursor across the page to reach a target element.