:hover

The :hover pseudo class in CSS selects elements when the mouse cursor is current over them. It’s commonly associated with link () elements.

a:hover {
  color: green;
  text-decoration: underline overline;
}

So when a link like this is “hovered”:

<a href="#">Go to CSS Park</a>

It will turn green and have a line beneath and above it.

In IE 6 and below, :hover used to only work on links, but in newer browsers it works on any element. This can be particularly useful for things like dropdown menus in which you can wait for the :hover of a parent list item and then reveal the next level of the nested menu. Careful though, hover effects should be coupled with some kind of action, as that has been a long-established web pattern.

Browser Support