CSS navigation

[lozza]

This is a question someone else has asked me, as such i don't have any code to show but hopefully it's quite straight forward.

Having created:

#navigation
#navigation ul li
#navigation ul li a:hover

What needs to be done to style the individual links so that they change colour when the mouse is hovered over. At current all links do what the #navigation li a:hover specifies. But say i want "about to change to blue when i hover and contact to change to green when i hover.

i did suggest adding a class named .about etc.. but apparently that didn't work.

so is it a case of naming each li seperately? I'm not sure how this would be done.

would it be #navigation ul li about a:link

then the code would look something like:

<div id ="navigation">
<ul>
<li><div id="about>about</div></li>
</ul>

i hope you get my meaning, thansk for all help

 

[suarve]

Just add a new class or specify it in the code if its just appearing once. E.g.

<p style="color: sienna; margin-left: 20px">

 

[joeyjojo]

For individual hovers I would use something like:

#navigation {...}
#navigation ul li {...}
#navigation ul li a {default color etc}
#navigation ul li .green:hover {color:green;}

<div id="navigation">
<ul><li><a href="link" class="green">Linkage</a></li></ul>
</div>

Makes that link green when moused over. Not neat, but it works.

 

[lozza]

Just add a new class or specify it in the code if its just appearing once. E.g.

<p style="color: sienna; margin-left: 20px">

that wont work when you hover over a navigation button - it will just change the whole thing

For individual hovers I would use something like:

#navigation {...}
#navigation ul li {...}
#navigation ul li a {default color etc}
#navigation ul li .green:hover {color:green;}

<div id="navigation">
<ul><li><a href="link" class="green">Linkage</a></li></ul>
</div>

Makes that link green when moused over. Not neat, but it works.

I'll give that a try