Rollover behaviour applying to whole div-HELP

[tobymather]

Dear all

I am trying to create a navigation bar similar to the one at the top of this site, where the links change color when rolled over. All my links are defined in a div tag:

Code: Select all

<div class="style3" id="navigation">
Home | Calendar | Photo Gallery | Applications | For Sale/ Wanted | Contact Us | Links</div>

with an external style sheet, and then when I add a rollover behaviour to that style sheet:

Code: Select all

#navigation:hover {
    font-weight: bolder;
    color: #FF0000;
}

but that makes the whole div go red when I roll over it, rather than just an individual bit of text. How do I apply individual hover behaviours to different pieces of text in 1 div?????



PLEASE HELP!!


Thanks

Tobmeister

[karinne]

Apply the :hover to a instead since :hover won't work in IE anyways.

So ... something like this

Code: Select all

#navigation a:hover {
    font-weight: bolder;
    color: #FF0000;
}

[tobymather]

I put that in but then the rollover stopped all together!! Please help everybody...

[karinne]

Well ... you need to create the links in that navigation.

Code: Select all

<div class="style3" id="navigation">
<a href="">Home</a> | <a href="">Calendar</a> | Photo Gallery | Applications | For Sale/ Wanted | Contact Us | Links</div>

etc...

[pa007]

If what you have posted is your actual code then it won't work. Make sure you links are merked up properly. Like this:

Code: Select all

<a href="#">link</a>

If your code and stylseeht don't match up then it won't work. If that wasn't your exact code that you posted earlier then could you post the code again, withou any alterations.

Pete.

[tobymather]

thanks very much that's working now.

[moojoo]

Just for reference if you do need to use :hover on a non link element this will make it work in IE

http://www.xs4all.nl/~peterned/csshover.html

[Ryan Fait]

That's a nice link too. I'm still a fan of just regular old JavaScript for that stuff, though.