Hover Effect
A hover effect changes an element's presentation while a pointing device rests over it without activation. CSS commonly implements this through the :hover pseudo-class. Such effects can signal that an element is interactive or provide additional visual feedback, but they should never be the only route to important information or functionality.
Touch devices have no reliable persistent hover state, while keyboard users reach elements through focus. A robust interface therefore provides equivalent :focus-visible and active states and keeps essential content available without hover. Motion, contrast, and size changes should be restrained so they improve orientation without layout shifts or unnecessary distraction.
- Visual response to a pointing device
- Helps identify interactive elements
- Do not rely on it for touch devices
- Provide equivalent focus states
- Never expose essential content only on hover
Frequently asked questions
A hover effect is a visual state change when a pointer rests over an element without activating it.
Not reliably in the same way as with a mouse. Important information and functions must therefore remain available without hover or after clear activation.
