Links Hover Color

[Total: 0    Average: 0/5]

This example illistrates how to have multiple links on a page that behave differently for each link class defined.

Body Code:

<style type=text/css>
A.c1:link    {text-decoration: underline; font-weight: normal; color: blue}
A.c1:visited {text-decoration: underline; font-weight: normal; color: steelblue}
A.c1:active  {text-decoration: underline; font-weight: normal; color: steelblue;background-color:#DDDD11;}
A.c1:hover   {text-decoration: underline; font-weight: normal; color: blue;background-color:#FFFF33;}
A.c2:link    {text-decoration: underline; font-weight: normal; color: green}
A.c2:visited {text-decoration: underline; font-weight: normal; color: yellow}
A.c2:active  {text-decoration: underline; font-weight: normal; color: brown;background-color:#DDDD11;}
A.c2:hover   {text-decoration: underline; font-weight: normal; color: black;background-color:#FFFF33;}
A.c3:link    {text-decoration: underline; font-weight: normal; color: red}
A.c3:visited {text-decoration: underline; font-weight: normal; color: orange}
A.c3:active  {text-decoration: underline; font-weight: normal; color: silver;background-color:#DDDD11;}
A.c3:hover   {text-decoration: underline; font-weight: normal; color: pink;background-color:#FFFF33;}
</style>
<a class=c1 href="#">link type class c1</a><BR>
<a class=c2 href="#">link type class c2</a><BR>
<a class=c3 href="#">link type class c3</a><BR>

Times Viewed: 6

Leave a Reply

Your email address will not be published. Required fields are marked *