Ok.. cell background change

[cdxrevvved]

Say I have these 2 styles...

td.mainmenu {
font-size: 7pt;
font-family: arial, sans-serif;
background: #ffffff;
color: #0000ff;
text-decoration: none;
}

td.mainmenu2 {
font-size: 7pt;
font-family: arial, sans-serif;
background: #6699cc;
color: #ffffff;
text-decoration: none;
}

And then the following code:

print("<tr><td class='mainmenu'>
<a href='index.php?content=mainmenu'>
Main Menu</a></td></tr>"); 

What I am trying to do is switch between the styles .. Would this be done with onmouseover and onmouseout? I know by incorporating those into the <TD> declaration I can change one atribute.. but no matter what I do, I cant figure out how to change the styles.... HELP!

ex:

<td onmouseover="this.style.background='green';" onmouseout="this.style.background='#ffffff';" align="center">This cell will turn green</td>



So, hows it done???

Feel free to strip the print(" off of it.. my entire site is database driven using php, and I was just too lazy to strip it myself...

And before anyone yells, The search isnt returning anything, although im sure this has been answered before... But Im not finding it....

[cdxrevvved]

Styles used:

td.mainmenu {
    font-size: 7pt;
    font-family: arial, sans-serif;
    background: #ffffff;
    }

td.mainmenu2 {
    font-size: 7pt;
    font-family: arial, sans-serif;
    background: #0099ff;
    font-weight: bold;
    text-decoration: none;
    color: #ffffff;
    }


A:hover.mainmenu {
color: #ffffff;
font-weight: bold;
text-decoration: none;
} 

A:visited.mainmenu, A:link.mainmenu, A:active.mainmenu {
color: #6699cc;
font-weight: normal;
text-decoration: none;
} 

Using those styles,

<table>
<tr>
<td class='mainmenu' onmouseover="this.className='mainmenu2';"
onmouseout="this.className='mainmenu';">
<a class='mainmenu' href='index.php?content=mainmenu'>
TESTING
</a>
</td></tr></table>

ok now that successfully changes the background of the cells.

the problem is, once a link is clicked, it goes to the visted color, 6699cc. This is fine.. But when I move the mouse into that cell again, the link is still that color. I need it to switch back to the bold, white...

Any ideas? Its probably so simple too.... UGH!!!


*Both posts edited for readability

[nkaisare]

Change the order of hover and link.
Instead of

A:hover.mainmenu {...}
A:visited.mainmenu, A:link.mainmenu, A:active.mainmenu {...}

use the following

A:visited.mainmenu, A:link.mainmenu, A:active.mainmenu {...}
A:hover.mainmenu {...}

[cdxrevvved]

if its that simple, im going to scream....

[cdxrevvved]

*** EXTREMELY LOUD EAR PIERCING SCREAM ***

And I've been beating my head against the desk all night trying to figure this out....

[J.C.]

DUDE YOU RAWK!!!!!