:hover
Matches an element while the mouse pointer is over it.
Syntax
selector:hover { … }Examples
A button changes color under the pointer:
<style>
.btn { padding: 8px 16px; background: royalblue; color: white; border: 0; }
.btn:hover { background: navy; }
</style>
<button class="btn">Hover over me</button>Hovering over a parent reveals a child:
<style>
.card { padding: 12px; border: 1px solid lightgray; }
.card:hover .hint { visibility: visible; }
.hint { visibility: hidden; color: gray; }
</style>
<div class="card">Card <span class="hint">— more details</span></div>Notes
Touch screens have no real hover: a tap may trigger :hover and leave it stuck. Do not hide anything important behind hover, and pair it with :focus-visible for keyboard users. To show hover effects only on devices with a mouse, wrap them in @media (hover: hover).
See also
- :focus — Matches the element that currently has focus: a field being typed into, a button selected with Tab.
- :active — Matches an element while it is being pressed — between pressing and releasing the mouse button.
- transition — Animates the change of a property from the old value to the new one.
Related recipes
- How to add a hover effect
- How to add a smooth transition
- How to change a link's color and remove the underline
- How to make a striped table
- How to make a tooltip
- How to scale an element on hover
- How to show an element on hover
- How to style a button
- How to style link states: visited, hover, focus
- How to underline text and style the underline
In the tutorial
- Pseudo-classes — Styles for element states and positions — hover, focus, links, first-child, nth-child, not and form fields.