Highlight table row on mouseover


CSS • HTML


<STYLE>
<!--
  tr { background-color: #DDDDDD}
  .initial { background-color: #DDDDDD; color:#000000 }
  .normal { background-color: #CCCCCC }
  .highlight { background-color: #8888FF }
//-->
</style>

<table border="0" cellspacing="0" bgcolor="#CCCCCC" cellpadding="0">
<tr>
  <td bgcolor="#FFCC00" WIDTH="100"><b>Brand</b></td>
  <td bgcolor="#FFCC00" WIDTH="100"><b>Dimensions</b></td>
  <td bgcolor="#FFCC00" WIDTH="100"><b>Price</b></td>
  <td bgcolor="#FFCC00" WIDTH="100"><b>Size</b></td>
  <td bgcolor="#FFCC00" WIDTH="100"><b>Color</b></td>
  <td bgcolor="#FFCC00" WIDTH="100"><b>&nbsp;Type</b></td>
  <td bgcolor="#FFCC00" WIDTH="100"><b>Comment</b></td>
</tr>
<tr style="background-color:#CCCCCC;" 
  onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
  <td>Row A</td>
  <td>200x300</td>
  <td>$200,000.00</td>
  <td>small</td>
  <td>white&nbsp;</td>
  <td>good</td>
<td>2 doors</td>
</tr>
<tr 
  onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
  <td>Row B</td>
  <td>256x1000</td>
  <td>$232,300.00</td>
  <td>large</td>
  <td>yellow&nbsp;</td>
  <td>good</td>
  <td>nice</td>
</tr>
<tr class="initial" 
  onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
  <td>Row 3</td>
  <td>543x300</td>
  <td>$122,111.00</td>
  <td>medium</td>
  <td>yellow&nbsp;</td>
  <td>good</td>
  <td>expensive</td>
</tr>

Written by Frank Joseph Brefere III

Posted by fbrefere001 on Saturday August 16, 2008