Hyperlink rollover colours
Hi
Whats the best way of having five hyper links, and when you hover over each one, the colour changes. It cant be global, using CSS, as each link must have a different rollover colour ?
Thanks
Hi
Whats the best way of having five hyper links, and when you hover over each one, the colour changes. It cant be global, using CSS, as each link must have a different rollover colour ?
Thanks
timjpriebe posted this at 12:47 — 23rd September 2005.
He has: 2,667 posts
Joined: Dec 2004
Give each of them a different ID, and set up the rollover effects based on ID.
JeevesBond posted this at 12:55 — 23rd September 2005.
He has: 3,956 posts
Joined: Jun 2002
In your (x)html:
<a href="#" id="link1">Link Text</a><a href="#" id="link2">Link Text</a>
<a href="#" id="link3">Link Text</a>
<a href="#" id="link4">Link Text</a>
<a href="#" id="link5">Link Text</a>
and in your CSS:
#link1:hover {color: #f00;
}
#link2:hover {
color: #0f0;
}
#link3:hover {
color: #00f;
}
#link4:hover {
color: #ff0;
}
#link5:hover {
color: #fff;
}
Simple as that really, obviously change the colours and id's to fit your needs and you should be done.
a Padded Cell our articles site!
mfdc posted this at 12:56 — 23rd September 2005.
They have: 160 posts
Joined: Aug 2004
sorry to be a dunce, but could you give me an example in HTML ?
mfdc posted this at 12:59 — 23rd September 2005.
They have: 160 posts
Joined: Aug 2004
bless you, thankyou very much thats excellent. I had been searching on Google & worked it out, so feel a little guilty for posting something so lazy
Thankyou
mfdc posted this at 13:18 — 23rd September 2005.
They have: 160 posts
Joined: Aug 2004
My CSS is
A {
TEXT-DECORATION: none
}
A:link {
COLOR: #343A34
}
A:visited {
COLOR: #343A34
}
A:link1:hover {
COLOR: #ff8c00
A:link2:hover {
COLOR: #00ff00
}
what do I insert into the anchor tag, obviously the id's are link 1 link 2etc
kazimmerman posted this at 20:16 — 23rd September 2005.
He has: 698 posts
Joined: Jul 2005
Well, it should be A.link1:hover first of all, then in your HTML put something like this:
<a href="#" class="link1">Text</a>Kurtis
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.