CSS2 » Other » hover

Version: Level 2

Compability: IE4+  N6+


The hover pseudo-class is used to apply a style to a link element when the cursor passes over the link (i.e., a mouse-over). Under those circumstances, the cusor is said to hover over the link.

All together, there are four pseudo-classes that are reserved for use with the HTML anchor tag (a). They are used to assign any appropriate CSS property:value pair to a link. Most typically, they are used to designate a font color, or background color, or to remove the under lining.

A pseudo-class is assigned to a selector via following syntax:

selector:pseudo-class { property: value; ...; }

A pseudo-class can also be used with the value assigned as a class to a selector:

selector.class:pseudo-class { property: value; ...; }


a:active { background-color: RGB(100, 14, 107); text-decoration: none; }
a:hover { color: red; text-decoration: none; }
a:link { color: teal; text-decoration: none; }
a:visited { visibility: hidden; }

Move the mouse over the following link and note the appearance change:

Language(s): CSS2
a.example:hover {
color: yellow; font-size: 50px; background-color: red; text-decoration: none;
<a class="example" href="http://www.devguru.com" target="_blank">DevGuru</a>
Language(s): CSS2

See Also: