Add mouse hover effect for each row in a table
Description
The following code shows how to add mouse hover effect for each row in a table.
Example
<html>
<head>
<style type="text/css">
table.hovertable {<!-- w w w. ja v a2s. c o m-->
color: #333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}
table.hovertable th {
background-color: #c3dde0;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.hovertable tr {
background-color: #ddd;
}
table.hovertable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
</style>
</head>
<body>
<table class="hovertable">
<tr>
<th>Info Header 1</th>
<th>Info Header 2</th>
<th>Info Header 3</th>
</tr>
<tr onmouseover="this.style.backgroundColor='#eee';"
onmouseout="this.style.backgroundColor='#ddd';">
<td>Item 1A</td>
<td>Item 1B</td>
<td>Item 1C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#eee';"
onmouseout="this.style.backgroundColor='#ddd';">
<td>Item 2A</td>
<td>Item 2B</td>
<td>Item 2C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#eee';"
onmouseout="this.style.backgroundColor='#ddd';">
<td>Item 3A</td>
<td>Item 3B</td>
<td>Item 3C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#eee';"
onmouseout="this.style.backgroundColor='#ddd';">
<td>Item 4A</td>
<td>Item 4B</td>
<td>Item 4C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#eee';"
onmouseout="this.style.backgroundColor='#ddd';">
<td>Item 5A</td>
<td>Item 5B</td>
<td>Item 5C</td>
</tr>
</table>
</body>
</html>