mouseover/hover link highlight color HELP Please!!!?

Question

This is what I need help with:
http://i1.tinypic.com/73fiv52.jpg

Basically, I want all of the links in my menu to have a different highlight color on mouseover/hover, so that as you go down the links it looks like a rainbow. Ex: link1 is red on mouseover, link2 is orange, link3 is yellow, etc.

Can someone give me the code please???
(My layout is edited with html,CSS, and divs, if that helps.)

Answer 1

give each of the links a different class name and give them a black background for link and a different color for hover.

Your links will look like this:
Link

Your CSS will look something like this:
(Add padding, margins, or font style/family to make them look the way you want them to)

.color:link {
background-color: #000;
color: #fff;
}

.color:hover {
background-color: choose a color:
color: #000;
}

(optional, this is so that the users will know that they have already clicked on the link)
.color:visited {
background-color: choose a background color you want ;
color: choose the text color you would like;
}

Answer 2

your highlights ought to count on your pores and skin tone and what seems ultimate on you. i've got seen asians with the two pink and blue highlights and the two one regarded good. i, myself, have pink highlights considering is the organic tone of my hair. in case you like the organic look-inspect your hair heavily and you will possibly be able to work out the organic highlights brought about by utilising the solar. there are kits out right this moment that provides you with extra advantageous than one spotlight shade in an analogous scientific care. path, in case you wanna make a ambitious fact-there is often pink or another the two marvelous shade!

Answer 3

Well, that is easy, try visiting

http://www.cssplay.co.uk/menus/

There are many you may choose to use. Just click on any of them and "view" the source which will show all the CSS and the html needed.

In fact here is one from Stu's page (above) its simple and changes colors on hover
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">









Page 1
Page 2
Page 3
Page 4
Page 5
Page 6



I added the page6 link just so you would have 6 items but you can add or remove to suit your site. Change colors etc in the CSS.

That one is vertical, if you want horizontal use this one
http://www.cssplay.co.uk/menus/listnine.html


There simply isn't enough space here to list all the code possible for menus. If you were to "cut and paste" the code above into notepad and save it as html (file - save as - menu.html) it will work. Didn't even need a big program. Simple. Changing colors on each item just needs a couple more CSS entries for whatever colors you want.

Just answered the same thing this morning.

Answer 4

Try something like the following on each link:



Yahoo Answers always butchers HTML, but basically set your initial color and text decoration:

STYLE="color: mycolor; text-decoration: none"

Then set the OnMouseOver and OnMouseOut colors:

OnMouseOver="this.style.color=hovercolor"
OnMouseOver="this.style.color=mycolor"