The answer to that question is quite simple.
You remember the basic way to add a hover effect:
Code:
<HEAD>
<style type="text/css">
<!--
a:link {color: ; text-decoration: none; }
a:active {color: ; text-decoration: none; }
a:visited {color: ; text-decoration: none; }
a:hover {color: ; text-decoration: none; }
-->
</style>
</HEAD>
The above will create a hover effect on ALL links that in the document containing the above script.
To be able to have a number of hover effects we need to do two things:
Firstly we need to modily the script to specify the effects we are looking for:
Code:
<HEAD>
<style type="text/css">
<!--
a.effect1:link {color: ; text-decoration: none; }
a.effect1:active {color: ; text-decoration: none; }
a.effect1:visited {color: ; text-decoration: none; }
a.effect1:hover {color: ; text-decoration: none; }
a.effect2:link {color: ; text-decoration: none; }
a.effect2:active {color: ; text-decoration: none; }
a.effect2:visited {color: ; text-decoration: none; }
a.effect2:hover {color: ; text-decoration: none; }
-->
</style>
</HEAD>
Secondly we assign one of the above styles to each link where we want the effect.
Code:
<BODY>
<p>This is the <a href="url" class="effect1">Link with hover effect 1</a>
<p>And this is the <a href="url" class="effect2">Link with hover effect 2</a>
Like in the first lesson the above code can be placed in an external CSS file which must be of the format
whatevername.css
For example
Code:
/* This is the external CSS file */
/* BTW this is a comment in a CSS file */
a.effect1:link {color: ; text-decoration: none; }
a.effect1:active {color: ; text-decoration: none; }
a.effect1:visited {color: ; text-decoration: none; }
a.effect1:hover {color: ; text-decoration: none; }
a.effect2:link {color: ; text-decoration: none; }
a.effect2:active {color: ; text-decoration: none; }
a.effect2:visited {color: ; text-decoration: none; }
a.effect2:hover {color: ; text-decoration: none; }
To add the hover effects to our document we need to link to the above CSS file. The link is placed in the <HEAD> of your document, for example:
Code:
<HEAD>
<link rel="stylesheet" type="text/css" href="mystylesheets/whatevername.css">
</HEAD>
You can have any number of hover effects in a document once you assign each a unique name. The name you give the effect is not important once it matches the class="" in the link where you want the effect.
You can also link to a number of different external css files if you wish.
I apologise for any errors or omissions.
Questions or feedback would be greatly appreciated.
+
