Change background color of table on hover?

height of table is 20, size is 10, how to change background (and font)?

[pengster]

the height of table is 20, the size is of the text is 10. I have a problem with "hover":
I know how to change the background, but it only changes it up to the size of the text. (in this case 10).
How can I modify the css to fill out the hole height of the table (20)?
I already tried to aply a background-image in the size of twenty, but it is not showed.

Do I have to aply some sort of javascript? Where can I find one?

here's the code:

a:hover.sublevel { color: #336699; text-decoration: none; background-color: White; background-attachment: fixed; background-image: url(../Images/background/nav_white.gif); }

HTML:

<td height="20" align="left" nowrap class="sublevel">
<a class="sublevel" href="index.html">Controlling</a></td>

[d_fused]

Hi there,

Put in CSS:

td.normal{
height: 20px;
color: #336699;
text-decoration: none;
background-color: White;
background-attachment: fixed;
background-image: url(../Images/background/nav_white.gif);

}

td.normalon {
height: 20px;
color: #3366FF;
text-decoration: none;
background-color: White;
background-attachment: fixed;
background-image: url(../Images/background/nav_white.gif);

}

HTML:

<tr>
<td class="normal" onmouseover="this.className='normalon'"
onmouseout="this.className='normal'"><a class="sublevel" href="index.html">Controlling</a></td>
</tr>

Regards,
d_fused

[pengster]

thanks a lot!
It helped a lot, because I created an image with the exact height of 20, I set all your parameters to 0 and it worked.

one more thing?
If i roll over the table (not the text in it), it already changes the background (from blue to white) and the text becomes onreadable until you roll over the text (I changed the suggested class "menu" with my class "sublevel"). Then, it changes from white to blue.

any ideas?

what is the correct syntax?
<td height="20" align="left" nowrap class=nav onmouseover="this.className='navon'" onmouseout="this.className='nav'">
or
<td height="20" align="left" nowrap class="nav" onmouseover="this.className='navon'" onmouseout="this.className='nav'">

[d_fused]

Hi, pengster,

what is the correct syntax?

It works both ways, I think, but I would go for the second example: "navon".

2c.

[pengster]

Hy, did you edited your entry? before it was:

TD.nav {
BACKGROUND: url(../Images/background/nav_blue.gif);
}

TD.navon {
BACKGROUND: url(../Images/background/nav_white.gif);
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px;
}

which worked exept from the error described above?