CSS Rollovers

When using the pseudo classes they must be in a specific sequence in order to be effective.

a:hover must come after a:link and a:visited
a:active must come after a:hover

  1. a:link
  2. a:visited
  3. a:hover
  4. a:active
  5. a:focus

The following effect uses a:link, a:hover, and a:active, and for Mozilla, Firefox, and NS7 the pseudo class a:focus

Default - colour 1
Mouseover - colour 2
Mouseout - back to colour 1
Onclick - colour 3 remains until another link is clicked
The previously selected link goes back to colour 1
 Link 1 Link 2 Link 3

Note: if you click off a link the default colour is shown.
For a Javascript remedy see Link Rollovers 2

<style>
A{background-color:#445544;color:#FFFFFF;width:100px;padding-left:5px;border-bottom:1px solid #00FF00;display:block}
A:hover{background-color:#AADDAA}
A:active{background-color:#77AA77}
A:focus{background-color:#77AA77} /* Moz, Firefox, NS7 */
</style>

<a href="#null">Link 1</a>
<a href="#null">Link 2</a>
<a href="#null">Link 3</a>

The above example can be applied to more than one set of links in the same page simply by creating rules for each set of links allowing different styles to be used.

Link Set 1 Link Set 1 Link Set 1 Link Set 2 Link Set 2 Link Set 2 Link Set 3 Link Set 3 Link Set 3

<style>
A.lnk1{background-color:#555544;color:#FFFFFF;width:100px;padding-left:5px;border-bottom:1px solid #00FF00;display:block}
A.lnk1:hover{background-color:#DDDDAA}
A.lnk1:active{background-color:#AAAA77}
A.lnk1:focus{background-color:#AAAA77} /* Moz, Firefox, NS7 */

A.lnk2{background-color:#554444;color:#FFFFFF;width:100px;padding-left:5px;border-bottom:1px solid #00FF00;display:block}
A.lnk2:hover{background-color:#DDAAAA}
A.lnk2:active{background-color:#AA7777}
A.lnk2:focus{background-color:#AA7777} /* Moz, Firefox, NS7 */

A.lnk3{background-color:#444455;color:#FFFFFF;width:100px;padding-left:5px;border-bottom:1px solid #00FF00;display:block}
A.lnk3:hover{background-color:#AAAADD}
A.lnk3:active{background-color:#7777AA}
A.lnk3:focus{background-color:#7777AA} /* Moz, Firefox, NS7 */
</style>

<a class="lnk1" href="#null">Link Set 1</a>
<a class="lnk1" href="#null">Link Set 1</a>
<a class="lnk1" href="#null">Link Set 1</a>

<a class="lnk2" href="#null">Link Set 2</a>
<a class="lnk2" href="#null">Link Set 2</a>
<a class="lnk2" href="#null">Link Set 2</a>

<a class="lnk3" href="#null">Link Set 3</a>
<a class="lnk3" href="#null">Link Set 3</a>
<a class="lnk3" href="#null">Link Set 3</a>

<style>
a.lnk4{color:#00AA00; text-decoration:none;font-weight:bold}
a.lnk4:hover{color:#00FF00; text-decoration:underline}
A.lnk4:active{color:#00DD00}
A.lnk4:focus{color:#00DD00}

a.lnk5{color:#AAAA00; text-decoration:none;font-weight:bold}
a.lnk5:hover{color:#FFFF00; text-decoration:underline}
A.lnk5:active{color:#BBBB00}
A.lnk5:focus{color:#BBBB00}
</style>
<A href="#null" class="lnk4">Link style 1</A>
<A href="#null" class="lnk4">Link style 1</A>
<A href="#null" class="lnk4">Link style 1</A>


<A href="#null" class="lnk5">Link style 2</A>
<A href="#null" class="lnk5">Link style 2</A>
<A href="#null" class="lnk5">Link style 2</A>

 
Link Link Link