Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How do I create Multiple hover effects??

Hover Effect

How do I create Multiple hover effects??

by  cian  Posted    (Edited  )
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.

+
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top