CSS :hover Selector

.example:hover {
  color: red;
}

Meaning

The :hover selector matches when the user interacts with an element with a pointing device, but does not necessarily activate it.

It is generally triggered when the user hovers over an element with the cursor (mouse pointer).

Note: The :hover pseudo-class is problematic on touchscreens.

Version: CSS1

Standard Syntax

:hover {
  css declarations;
}

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Status

More Example

Styling unvisited, visited, hover, and active links:

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: yellow;
}

/* mouse over link */
a:hover {
  color: black;
}

/* selected link */
a:active {
  color: pink;
}