:hover | CSS-Tricks

Sara Cope on Sep 6, 2011 (Updated on Jul 14, 2021)

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

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

So when a link like this is “hovered” (like with a cursor on a device with a mouse):

<a href="https://google.com">Go to Google</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.