PDA

Click to See Complete Forum and Search --> : 2 colour rollovers on 1 page

Yanhead
06-28-2003, 04:42 PM
Does anyone know how I can make 2 different colour text rollovers on an HTML page with a CSS?

link 1 (rollover=red)
link 2 (rollover=Green)

when you use 'a:hover' it applies it to 'all' the rollovers so how do you therefore tell a specific link to rollover a different colour?

Thanks
CrazyGaz
06-28-2003, 05:01 PM
a.red:hover {color: ff000;}
a.green:hover {color: 00ff00;}

<a class="red">red link</a>
<a class="green">green link</a>

hope this helps, Gaz
David Harrison
06-28-2003, 05:33 PM
If it's just the one link that you want to be a different colour then you could use this:

a:hover {color:#0f0;}
a#red:hover {color:#f00;}

<a href="#" id="red">red link</a>
<a href="#">all other links link</a>

but the a#red:hover rule has to come after the a:hover rule because otherwise the a:hover rule will take presidence, so on second thoughts it may be better to use CrazyGaz's idea unless you have a LOT of "normal" links.

Waaaaaay to many #'s in there so here's a key:

a#red - the hash here is to signal that "red" is an id.

color:#0f0; - this one is to signal that "0f0" is a colour code.

href="#" - this one is a link that doesn't go any where, like an anchor link except that no anchor is specified, so it does nothing.
pyro
06-28-2003, 05:52 PM
I would think CrazyGaz's method would be preferred, as an ID can only be attributed to one element, while a class can be given to many. Even if you are only going to use it for one link, I personally would use a class or define it inline.
Yanhead
06-29-2003, 01:19 PM
Originally posted by CrazyGaz
a.red:hover {color: ff000;}
a.green:hover {color: 00ff00;}

<a class="red">red link</a>
<a class="green">green link</a>

hope this helps, Gaz

Hi not having any luck on the implementation of the above, am I doing it wrong?



<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>title</title>
<style type="text/css" media="screen"><!--a.red:hover { color: red }
a.green:hover { color: green }--></style>
</head>

<body bgcolor="#ffffff">
<br>
<a class="red">red link</a><br>
<br>
<a class="green">green link</a><br>
<br>
<p></p>
</body>

</html



what am I doing wrong?

Thanks
pyro
06-29-2003, 01:23 PM
You don't have any hrefs set for you links, so they obviously won't have any hover color...
Yanhead
06-29-2003, 05:18 PM
Originally posted by pyro
You don't have any hrefs set for you links, so they obviously won't have any hover color...

sorry, where should the href go? withing the <a> tag?

Thanks
Yanhead
06-29-2003, 05:22 PM
don't worry I got it.

thanks for your help.
pyro
06-29-2003, 05:22 PM
Yes, like a normal link, only with a class added.

<a href="http://www.w3c.org" class="red">This link has the red class</a>