|
|
|
Tutorials » Link Effect
Want to change the color of your link or make each link have different
effect? You can do that with CSS. CSS is like below.
<style type="text/css">
A:link
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none]
color:#000000; }
A:visited
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none]
color:#000000; }
A:active
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none]
color:#000000; }
A:hover
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none]
color:#000000;}
</style>
|
Just replace those in bolds to either underline, overline or to
whatever colour that you want.
If you want a link effect where one link changes to blue color when you
mouse moves over it and another to red color when your mouse moves over it,
just type in these.
<style type="text/css">
A:link
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none]
color:#000000; }
A:visited
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none]
color:#000000; }
A:active
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none]
color:#000000; }
A:hover
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none]
color:#000000;}
A:link.menu1 [you can name menu1 to whatever name
you want]
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none]
color:#000000; }
A:visited.menu1
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none]
color:#000000; }
A:active.menu1
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none]
color:#000000; }
A:hover.menu1
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none]
color:#000000;}
</style>
|
An example is below, just point your cursor on the words.
OK to get this result, you must put class="menu1" or whatever
you have named it into the link tag <a href="URL">. An example
is like below.
<a href="URL" class="menu1">
If you want three or more different effects just cut and paste the menu1 as many times as you want,
but this time you must rename each of them to some other name and not menu1. Each of them must have
a unique name. Do not forget to add in the fullstop sign before the name of the specific link-effect. |