CSS :hoverSelectors

Complete CSS Selector Reference Manual

Example

Select the style when the mouse moves over a link:

a:hover { background-color:yellow; }

Try it Yourself »

Definition and Usage

:hover adds a special style when the mouse is moved over a link.

Tip:The :hover selector can be used on all elements, not just links.

Tip: :linkThe selector sets the style for unvisited page links.:visitedThe selector sets the style for visited page links.:activeThe selector sets the style for when you click a link.

Note:For the desired effect, in the CSS definition, :hover must be placed after :link and :visited!!

Browser Support

The numbers in the table indicate the first browser version that supports the property.

Selectors
:hover 4.0 7.0 2.0 3.1 9.6

Note:Must be declared in IE<!DOCTYPE>Only in this way can the :hover selector be guaranteed to work effectively.

Related Pages

CSS Tutorial:CSS Links

CSS Tutorial:CSS Pseudo-classes

Examples

Try it Yourself - Examples


Example

Links that are active, visited, unvisited, or have a mouse hovering over them:

a:link    {color:green;}
a:visited {color:green;}
a:hover   {color:red;}
a:active  {color:yellow;}

Try it Yourself »

Example

Different link styles

a.ex1:hover,a.ex1:active {color:red;}
a.ex2:hover,a.ex2:active {font-size:150%;}

Try it Yourself »

Complete CSS Selector Reference Manual

other extensions