Changing the colour of a cell on a rollover?

[Solarpitch]

Hey Guys,

 

Just wondering how you change the colour of a cell based on a rollover? http://www.dynamicdrive.com has the perfect example. On there main menu on the right it changes from white to green when you rollover . . just wondering how its done?

 

I can do rollover's in css with hover and that, but I cant seem to get it to work when I apply it to a cell?

 

Cheers!

[Daniel0]

Like this?:

<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
}

#nav {
list-style-type: none;
display: block;
padding: 0;
width: 100px;
}

#nav a {
text-decoration: none;
color: green;
font-weight: bold;
display: block;
}

#nav > li {
margin-bottom: 5px;
border-bottom: 1px solid #AAA;
}

#nav a:hover {
color: white;
background: green;
}
</style>

<ul id="nav">
<li><a href='#'>Link 1</a></li>
<li><a href='#'>Link 2</a></li>
<li><a href='#'>Link 3</a></li>
<li><a href='#'>Link 4</a></li>
<li><a href='#'>Link 5</a></li>
</ul>

[Waldir]

Sure. Assumption: the links are directly in the TD, there are no intervening

elements.

 

td.hover {

  styles for hovered TD

}

 

window.onload = function ()

{

  var x = document.getElementById('id_of_nav_table');

  var y = x.getElementsByTagName('A');

  for (var i=0;i<y.length;i++)

  {

    y.onmouseover = function () {this.parentNode.className='hover'}

    y.onmouseout = function () {this.parentNode.className=''}

  }

}

 

Now the className of the TD changes onMouseOver on the link to 'hover' and

the browser applies the special styles. onMouseOut the className is removed

again and the TD reverts to the standard styles.

[Solarpitch]

Thanks Daniel0. I tried your method and it work fine. Thanks for your help Waldir too!