:hover

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

Comments

  1. User Avatar
    Mitchell
    Permalink to comment#

    Hello CSS Tricks:

    Can a:hover be reset to remove inherited values?

    Thank you,
    Mitchell

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag