INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Hover Effect

How do I create Multiple hover effects?? by cian
Posted: 24 Jan 02 (Edited 29 May 02)

The answer to that question is quite simple.

You remember the basic way to add a hover effect:


<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:


<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.


<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


/* 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:


<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.

+

Back to HTML, XHTML & CSS FAQ Index
Back to HTML, XHTML & CSS Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close