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?
Thanksa.red:hover {color: ff000;}
a.green:hover {color: 00ff00;}
<a class="red">red link</a>
<a class="green">green link</a>
hope this helps, GazIf 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=http://www.webdeveloper.com/forum/archive/index.php/"#" id="red">red link</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">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=http://www.webdeveloper.com/forum/archive/index.php/"#" - 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.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.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?
ThanksYou don't have any hrefs set for you links, so they obviously won't have any hover color...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?
Thanksdon't worry I got it.
thanks for your help.Yes, like a normal link, only with a class added.
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3c.org" class="red">This link has the red class</a>
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?
Thanksa.red:hover {color: ff000;}
a.green:hover {color: 00ff00;}
<a class="red">red link</a>
<a class="green">green link</a>
hope this helps, GazIf 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=http://www.webdeveloper.com/forum/archive/index.php/"#" id="red">red link</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">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=http://www.webdeveloper.com/forum/archive/index.php/"#" - 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.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.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?
ThanksYou don't have any hrefs set for you links, so they obviously won't have any hover color...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?
Thanksdon't worry I got it.
thanks for your help.Yes, like a normal link, only with a class added.
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3c.org" class="red">This link has the red class</a>