Hover State

Definition

A Hover State is a visual change that occurs when a user places their cursor over an interactive element, such as a button or link, without clicking it. Hover effects, such as color changes, underlining, or animations, provide users with feedback that an element is interactive and can be clicked or selected. This improves usability and engagement in desktop interfaces.

Why it matters

Hover states are the primary way desktop web interfaces communicate affordance — that an element is interactive before a user commits to clicking it. Without hover states, users hesitate, miss interactive elements, or click things they didn't intend to. The challenge is that hover states don't exist on touch devices, so any interaction or content that relies on hover is completely hidden from mobile users — a critical bug that's easy to introduce and easy to miss in desktop-only testing.

Real-world example

GitHub's code review interface shows line-level comment buttons only on hover — a clean solution for desktop users, but one that required a completely different interaction pattern for mobile, where the buttons appear in a fixed toolbar instead.