Hover states
Hover states are what happen when a mouse pointer moves over an interactive element.
What’s in it
What is it for?
Hover states are what happen when a mouse pointer moves over an interactive element. Interactive elements include things like links, buttons, and inputs.
Hover states must also follow all the usual accessibility guidelines. For instance, if extra content appears when someone hovers over or focuses on an element, it must stay visible while they move the pointer onto it (screen magnifier users often need to do this to read it). They must also be able to dismiss it, for example with the Escape key. This is Web Content Accessibility Guidelines (WCAG) SC 1.4.13 Content on Hover or Focus (Level AA).
How to support it
If you're building or designing a new component, make sure it has hover states that follow all accessibility guidelines (e.g. colour contrast, target size, descriptive text, etc.)