What Are Link Effects?
Cascading Style Sheet link effects give links the ability to have a different appearance for each state. A link can have a unique look when it:
- is inactive and unvisited link as when it is first displayed when a Web page first appears in a visitor's browser
- has been visited previously by the browser and the browser has retained the "memory" of that visit
- is in the hover state when a mouse pointer passes over it
- is in the active state when it is being clicked on by the visitor
Here's an example of an image rollover. Try it!
It is created using two separate images that change using JavaScript. Here are the two images:
(The two images are not linked and do not ave any effects associated with them.)
The traditional method of creating these different appearances is by using rollovers. A rollover is an image swap effect that requires JavaScript to work. These are sometimes called "image rollovers." Using Cascading Style Sheet pseudo classes it is possible to create "CSS rollovers" that do much the same thing as image rollovers, but do not require JavaScript or other scripting technology.
Pseudo Classes
Pseudo classes are specialized CSS classes that can be applied to some CSS elements. They are used to create special effects, and are particularly useful when applied to links. The default appearance for a text link is standard blue and underlined. Pseudo classes allow you to specify color, decoration, and more.
There are four pseudo classes that can be applied to links. Each represents a state. They are:
- :link
- :visited
- :active
- :hover
The :link pseudo class specifies the attributes of the link in its normal state, when a Web page is first displayed and a link has not been followed.
The :visited pseudo class specifies the attributes of the link after it has been visited by the browser.
The :active pseudo class specifies the attributes of the link while it is active, such as when the it is being clicked on. This is, generally, a very quick state and in some instances may not be seen because it passes so fast.
The :hover pseudo class specifies the attributes of the link when a mouse pointer passes directly over it.
Here are some examples of links that are styled with pseudo classes:
The attributes of one particular pseudo classes may be the same as those of another pseudo class or they can be different. You are allowed to mix and match attributes. The order in which the pseudo classes are written into the CSS is important, so to be sure that everything works correctly. Place them into the document in the order listed above.