:hover
The :hover pseudo-class matches an element while the pointer is over it.
Syntax
selector:hover { }Examples
.btn {
background: royalblue;
transition: background-color 0.15s;
}
.btn:hover { background: oklch(0.5 0.2 265); }
Output
Darkens the button background smoothly while the mouse is over it.
Notes
Hover does not exist on touch devices, so never make essential actions hover-only. Pair with :focus-visible for keyboard parity. Wrap in @media (hover: hover) to target true pointer devices.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 1.0 |
| firefox | 1.0 |
| safari | 1.0 |
| edge | 12 |