User action pseudo-classes
The :active, :focus, and :hover CSS pseudo-classes match elements based on how users are interacting with them.
Overview
The :active, :focus, and :hover CSS pseudo-classes match elements based on how users are interacting with them.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
non a elements Non-`a` element support | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| `:focus` | 1 | 12 | 1 | 1 | 18 | 1 |
| `:hover` | 1 | 12 | 1 | 2 | 18 | 1 |
| CSS selector | ||||||
a elements `<a>` element support | 1 | 12 | 1 | 2 | 18 | 1 |
all elements All elements support | 1 | 12 | 1 | 2 | 18 | 1 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
- By default, Safari on iOS does not use the `:active` state unless there is a `touchstart` event handler on the relevant element or on the `<body>` element.
Notes 1 item(s)
Implementation note
- As of Safari for iOS 7.1.2, tapping a clickable element causes the element to enter the `:hover` state. The element will remain in the `:hover` state until a different element has entered the `:hover` state.
Notes 1 item(s)
Implementation note
- In Edge, hovering over an element and then scrolling up or down without moving the pointer will leave the element in the `:hover` state until the pointer is moved.
Syntax
CSS
button:hover { background-color: #eee; }
button:active { transform: scale(0.98); }
button:focus { outline: 2px solid blue; }Live demo
Use cases
Using User action pseudo-classes
The :active, :focus, and :hover CSS pseudo-classes match elements based on how users are interacting with them.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features