What is a hover state in UX design?
A hover state is the visual treatment applied to an interactive element when the user's cursor is positioned over it. It typically involves a change in background color, opacity, border, cursor style, or text decoration that signals the element is interactive and ready to respond to a click. Hover states are one of the primary ways interfaces communicate affordance on desktop: they provide immediate feedback that the cursor has reached an interactive target and that clicking will produce a response.
What should hover states communicate?
A well-designed hover state communicates two things: that the element is interactive, and that the cursor is accurately positioned over it. The visual change should be perceptible without being dramatic: enough contrast difference to be noticed during natural cursor movement, but not so jarring that it creates visual noise as the cursor moves across the interface. A button that changes from grey to a slightly darker grey on hover provides a clear but subtle affordance. A button that changes from white to bright red creates unnecessary visual disruption. The hover state should feel like a natural confirmation, not a dramatic event.
How do hover states apply to touch and mobile contexts?
Touch devices have no hover state in the traditional sense: there is no cursor, so there is no concept of resting on an element without activating it. Mobile interfaces use focus states and active states to communicate interactivity instead. When designing for both desktop and mobile, hover states should be treated as a progressive enhancement for cursor-based interfaces rather than as the primary affordance signal. Critical interactive affordances should be communicated through design choices that work without hover: size, shape, color, and positioning that signal interactivity even in the absence of cursor interaction.