active
link
visited
PSEUDO-CLASSES: hover
hover
Compatibility:
IE4+ N6+
Version:
Level 2
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.
The three other pseudo-classes used with the
a
tag are:
active
The
active
pseudo-class effects a style when the link is selected (clicked on).
link
The
link
pseudo-class effects a style for a link that is not active and has not been visited.
visited
The
visited
pseudo-class effects the style for a link after the link has been visited.
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; ...; }
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; }
or
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>
Move the mouse over the following link and note the appearance change:
Output:
DevGuru
Copyright 1999-2001 by Infinite Software Solutions, Inc. All rights reserved.
Trademark Information