Connecting link to td tag

[horsebox]

I have a table and the td's switch between two classes with this

onmouseover="className='navon'" onmouseout="className='navoff'"

so that the background color changes when you hover over them. Take a look

http://toxicopoeia.com/

hover over that latest articles table. Problem is the links don't look good with that dark gray background so I need to make them brighter. What would be the easiest way to get the links to change color too?

[haku]

Google 'CSS rollovers'. Then drop the javascript rollover, and use a CSS rollover instead. In your CSS declaration for the rollover, you can also set 'color', which will be your text color.

[horsebox]

How do I make the link color different to the text color though. I need to leave the link green and the text black and on rollover the link bright green and the text white. The "color" command will only code for the color of one of them.

[haku]

Why would the text change color? It's not the link. That is likely to be confusing to your users.

 

It's impossible to have sibling elements change color on a rollover. As such, you cannot make text that is not part of the link change color when then link is rolled over. You can however do it with a parent element:

 

<div id="wrapper">
  <a>link</a>
  <p>text</p>
</div>

 

#wrapper a
{
  color: #0C4F00; // green
}

#wrapper p
{
  color: #000; // black
}

#wrapper:hover a
{
  color:#00FF0B; // bright green
}

#wrapper:hover p
{
  color:#FFF; //white
}

 

When the parent div is hovered, the colors of the child elements will change.