View Full Version : CSS Table Row Mouseover Effect

02-20-2004, 11:57 AM
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..

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 }

<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>

Any help would be wonderful. Thanks!

02-20-2004, 12:57 PM
Style the a elements with "display: block" and an explicit width (IE5.x/Win requirement).
Also, look into the use of lists for constructing menu bars as opposed to the - non-recommendable - abuse of tables in the Listutorial (http://css.maxdesign.com.au/listutorial/index.htm).

03-03-2004, 08:38 PM
http://www.geocities.com/dwightl.geo/ Click on CSS Buttons in the dropdown menu. you can use the basic stylesheet and make a few alterations to get the effect you want