:hover

Avatar of Sara Cope
Sara Cope on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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.

Browser support

IEEdgeFirefoxChromeSafariOpera
AllAllAllAllAllAll
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mobile
AllAllAllAllAll
Source: caniuse