The :hover pseudo-class matches an element while a pointing device is over it — usually when the mouse cursor rests on the element without pressing.
Use it for feedback on links, buttons, and cards. For links, place :hover after :link / :visited and before :active (LVHA order).
Long-supported CSS pseudo-class across modern browsers.
On touch devices, :hover may never match, match briefly, or stick after a tap. Do not hide essential content behind hover alone. Prefer @media (hover: hover) for hover-only extras.
:hover { /* styles */ }Often combined with a type or class: a:hover, .btn:hover.
| Pattern | Description | Try it |
|---|---|---|
a:hover | Link while the pointer is over it | Try it |
.btn:hover | Button hover feedback | Try it |
| LVHA order | :link, :visited, :hover, :active | Try it |
| child on parent hover | Style a child when the parent is hovered | Try it |
| with transition | Smooth color change on hover | Try it |
@media (hover: hover) | Apply hover styles only when hover is available | Try it |
:hoverAdd a default style, then override it under :hover.
selector:hover { … } for pointer-over feedback.| Piece | Required? | Role |
|---|---|---|
| Base selector | Usually yes | Element that can be hovered |
:hover | Yes | Matches while the pointer is over it |
| LVHA order | For links | Prevents later link states from hiding hover |
| Hover media query | Optional | Limits hover-only styles to capable devices |
Move the pointer over the samples. Switch the hover style with the controls.
Each snippet focuses on :hover. Use Try It Yourself for a live editor.
Change a link’s background when the pointer is over it.
a {
background-color: #e0f2fe;
}
a:hover {
background-color: #fde047;
}:hover. The background updates while the pointer is over the link.:active (press).:link/:visited.Give a button clear pointer feedback.
.btn {
background: #2563eb;
color: #fff;
}
.btn:hover {
background: #1d4ed8;
}.btn defines the resting style..btn:hover shows the control is interactive.:focus for keyboard users.Hover the card to highlight text inside it.
.card:hover .label {
color: #1d4ed8;
font-weight: bold;
}.card:hover matches the card under the pointer..label inside that card gets the new styles.Most hover bugs are touch behavior, link order, or inaccessible UI.
Do not require hover to reveal navigation or critical content. Offer click/tap and keyboard paths too.
If :link or :visited comes after :hover with equal specificity, hover styles may not show. Use LVHA.
:hover does not help keyboard navigation. Pair with :focus (and ideally :focus-visible).
Wrap hover-only polish in @media (hover: hover) when it is not essential.
Use :active for the pressed state. It should come after :hover for links.
:hover is a browser CSS pseudo-class. Node.js, Deno, and Bun do not evaluate it.
Supported in all major browsers for decades (Baseline Widely available since about July 2015).
Bottom line: Production-ready. Plan for touch and keyboard separately from hover. Not a server runtime API.
:link, :visited, :hover, :active.:focus and optional @media (hover: hover).One line: selector:hover styles the element while the pointer is over it.
Style form controls whose values fall inside their allowed range.
8 people found this page helpful