Hi, i am kind of stuck with this problem so any help would be appreciated. I have a table with several rows. each cell within the row belongs to a certain class. I use these class names to colour the cells.
Here is one example row from my table:
<tr>
<td class = "summarypage-odd-column">Theme</td> <td class = "summarypage-odd-column">Q2 2009</td> <td class = "summarypage-odd-column">Q1 2009</td>
<td class = "summarypage-even-column">Theme</td> <td class = "summarypage-even-column">Q2 2009</td> <td class = "summarypage-even-column">Q1 2009</td>
<td class = "summarypage-odd-column">Business Area</td> <td class = "summarypage-odd-column">Q1 2009</td> <td class = "summarypage-odd-column">Q1 2008</td>
</tr>
I would like to highlight each row when the user moves mouse pointer over any cell in that row. So I used the following CSS code to achieve that.
tr:hover {
background-color: #FFFAF0; color: #000;
}
unfortunately it seems because each table data cell has a class name, the hover does not work. But if I remove the class names from data cells, the hover works.
My question is is there any way I can get the hover thing working for the table row, while still having class names for the table data cells inside the row.
thanks