Changing the Background and Border Color of a <TD> onMouseOver

OK, I really thought this one was going to be simple and I could figure it out in a half hour or so. Well, two hours later it’s still not working! I still think it’s pretty easy for someone who knows what they’re doing.

I’m just trying to do some fairly simple style swapping with onMouseOver and OnMouseOut. I’ve been changing background colors for years and now I’m just trying to do one or two more things but I cannot get it to work.

Basically, I have a table and when the user mousse over a row I’m trying to change the background color AND the border color for that row. This is the part that I cannot get to work. I can get it to work on a <TD> but not on a <TR>. I know that I’ve got something overriding something else, but I just cannot figure it out.

I’m trying to achieve an effect just like Yahoo mail. When the user mousse over a row, that row changes it’s background color and border. Also the entire row is “clickable” (i.e. when the user mouses over any part of the row the cursor changes). And finally, the last row has two different links in it so I’m not sure how that’s going to work? If you have Yahoo mail you can take a look at exactly what I’m trying to achieve.

Here’s what I got so far:

<style>

td            {
            font-family: verdana, arial, helvetica, sans-serif;
            color: #333333;
            font-size: 11px;
            }
            
.white  {
            font-family: verdana, arial, helvetica, sans-serif;
            color: #ffffff;
            font-size: 11px;
            }
            
.folder_table {margin:2px; padding:2px; background:#EEEEEE; border:solid 1px #999999}

.folder_table tr.selected {
      background-color: #C1D2EE;
      border: 1px solid #316AC5;
}

.folder_table tr.over {
      background-color: #999999;
      border: 1px solid #666666;
}

.folder_table tr.out {
      background-color: #EEEEEE;
      border: 1px solid #EEEEEE;
}
</style>


<td bgcolor="#900028" width="160" valign="top">

<table width="100%" cellpadding="8" cellspacing="0" border="0">
<tr><td valign="top">
<table width="148" cellpadding="0" cellspacing="0" border="0" class="folder_table">
<tr bgcolor="#000000" height="23">
<td colspan="3">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="white"><b>FOLDER</b></td>
<td align="right" class="small_white">[<a href="#" class="link_white">ADD</a> &#150; <a href="#" class="link_white">EDIT</a>]</td></tr>
</table>
</td></tr>

<tr class="selected"><td width="18"><img src="../images/icons/folder.gif" width="18" height="18" border="0"></td><td colspan="2"><b>Main</b></td></tr>

<tr onMouseOver="this.className='over'" onMouseOut="this.className='out'"><td width="18"><img src="../images/icons/folder_open.gif" width="18" height="18" border="0"></td><td colspan="2">Draft Campaigns</td></tr>


<tr onMouseOver="this.className='over'" onMouseOut="this.className='out'"><td width="18"><img src="../images/icons/folder.gif" width="18" height="18" border="0"></td><td colspan="2">Old Campaigns</td></tr>

<tr onMouseOver="this.className='over'" onMouseOut="this.className='out'"><td width="18"><img src="../images/icons/trash.gif" width="18" height="18" border="0"></td><td>Trash</td><td align="right" class="small">[<a href="#">EMPTY</a>]</td></tr>

</table>
</td></tr>
</table>
</td>