Hover State
The visual change that occurs when a user moves their cursor over an interactive element.
Definition
Hover states provide visual feedback when users mouse over interactive elements like buttons, links, and cards. They signal clickability and help users understand what actions are available.
Common hover state changes include color shifts, underlines, shadows, scale transformations, and icon reveals.
Why It Matters
Hover states are essential affordances that communicate interactivity. Missing hover states make interfaces feel unresponsive; inconsistent hover states create confusion.
Note that hover states don't exist on touch devices, requiring alternative feedback mechanisms for mobile.
Examples in Practice
A navigation link underlines and changes color on hover to indicate it's clickable.
Product cards lift slightly with a shadow on hover, inviting users to click for more details.
A button with a subtle background color shift on hover confirms it's an interactive element.