Tweet
I am trying to create a menu bar using CSS. I would like the text to change colour when the user places their mouse over the whole table row not just the actual letters. This is what I have so far..
<STYLE>
a.menu {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color:#FFFFFF; text-decoration: none; }
a.menu:hover {color: #000000; }
.cell_over { background-color: #FFCCCC }
.cell_out { background-color: #CC3333 }
</STYLE>
</head>
<body>
<table width="195" border="1" cellpadding="4" cellspacing="0" bordercolor="#000000">
<tr onclick="location.href='home.htm';">
<td width="190" height="24" align="right" valign="middle" onmouseover="this.className='cell_over';" onmouseout="this.className='cell_out';" bgcolor="#CC3333" ><strong><font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif"><a href="home.htm" class="menu">home</a></font></strong></td>
</tr>
</table>
</body>
Any help would be wonderful. Thanks!
<STYLE>
a.menu {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color:#FFFFFF; text-decoration: none; }
a.menu:hover {color: #000000; }
.cell_over { background-color: #FFCCCC }
.cell_out { background-color: #CC3333 }
</STYLE>
</head>
<body>
<table width="195" border="1" cellpadding="4" cellspacing="0" bordercolor="#000000">
<tr onclick="location.href='home.htm';">
<td width="190" height="24" align="right" valign="middle" onmouseover="this.className='cell_over';" onmouseout="this.className='cell_out';" bgcolor="#CC3333" ><strong><font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif"><a href="home.htm" class="menu">home</a></font></strong></td>
</tr>
</table>
</body>
Any help would be wonderful. Thanks!
Comment