hover

Version: Level 2

Compability: IE4+ N6+

Syntax:: hover

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; ...; }

Examples

Code:

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; }

Explanation:

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

Language(s): CSS2

Code:

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>

Output:


DevGuru

Primary links

CSS2 » Other » hover

Examples

Code:

Explanation:

Language(s): CSS2

Code:

Output:

Language(s): CSS2

See Also: