Grow your CSS skills. Land your dream job.

:hover

Last updated on:

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":

<a href="#">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.

More Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
any any any any any any any

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".