pseudo-class

:hover Pseudo-Class

Applies while the user designates an element with a pointing device without necessarily activating it. Most commonly used for interactive elements like links and buttons.

Syntax

:hover

Example

a:hover { text-decoration: underline; } /* HTML: <a href="#">Link</a> */

✓ Matches

<a href="#">Link</a> while hovered
<button>Save</button> while hovered
<div class="card"></div> while hovered

✗ Does not match

<a href="#">Link</a> when the pointer is elsewhere
any element on a touch-only device with no pointer

Browser support

Universal support in all browsers since CSS2.

Related selectors

:focus Pseudo-Class

:focus

:checked Pseudo-Class

:checked

:not() Negation Pseudo-Class

:not(selector)

:first-child Pseudo-Class

:first-child

:nth-child() Pseudo-Class

:nth-child(An+B)

← All CSS selectors · CSS selectors cheat sheet