Hi,

 

I am doing a site where my client has asked to make the hover state of each of the main page links a different colour.

 

So, each link will not have the same hover state colour - each will be a different colour.

 

I know it can be done and I can think of one way which would involve a lot of extra css to style each link.

 

Is there a quicker way please?

 

Thanks.

You will have to add different classes and different styles to each menu link if the hover is to have different colors on the same page.

 

If he had asked for different hover colors on different pages you could just add a different id to each page body tag and then add different hover color for each id in the stylesheet.

 

In both cases use a php "include" to repeat the menu on many pages, so you only have one file with markup and one stylesheet.

Edited August 8, 201214 yr by Wickham

So this would involve something like this for each link?

 

#navigation {
position:relative;
height: 22px;
border: 0px;
padding: 0px;
width: 780px;
z-index: 10;
float:right;
clear:both;
margin: 100px 0px 0px 0px;
z-index:3;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 4px;
}
#navigation li {
display: inline;
}
#navigation a:link, #navigation a:visited {
padding: 3px 20px 2px 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
text-decoration:none;
color:#ffffff;
border: 0px solid #FFFFFF;
}
#navigation a:hover {
color: #E35757;
}

 

If there are eight links I'd have to create 8 times the above code? That's the only way I can think to do it. Clumsy I know. But I'm not sure how to apply a style class for that would affect each individual links hover state!!

 

I know this is a relatively dumb question but first time attempting it.

 

Thanks for your reply.

Use your css for the first menu tab as default, then only add the hover state several times with different class for the others.

#navigation a.type1:hover {
color: red;
}
#navigation a.type2:hover {
color: blue;
}

 

HTML

<ul id="navigation">
<li><a href="default.html">one link</a></li>
<li><a class="type1" href="link1.html">link1</a></li>
<li><a class="type2" href="link2.html">link2</a></li>
</ul>

Edited August 8, 201214 yr by Wickham

That looks clever!!! Cleverer than my way!!!

 

Thanks v v much!

Dont forget to +1 those who help