tags:

views:

440

answers:

4

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

A: 

This does not happen for me. Make sure that you're only adding/removing class names when checking if they have an impact, and make sure that the tds don't have their own background covering up that of the tr.

Matchu
hi Matchu, you gave the cells class names but you didn't use those names to format the cells. try adding the following two lines to you 'style' section and see what happens. -- td.one{background-color: red} td.two{background-color: blue} -- This is the prob I am faced with.
Vicer
That's right. The `td` tags are on top, so their background color takes precedence. How about having `tr:hover td` as your style?
Matchu
+1  A: 

Try this:

tr:hover td {
  background-color: #FFFAF0; color: #000;
}

Place this after the existing td style declarations to be safe

Nick Craver
mate, you totally nailed it! Thanks. when I first looked at it I thought your solution will apply the back. color only to the data cell the mouse pointer is pointing at and not the whole row (which is what i wanted). But obviously that is not the case. There were some rows like the heading which i did not want to be highlighted so i simple defined another class below ur code and put:--- tr.summarypage-section-title:hover td{ background-color: deepskyblue; color: #000;} ---
Vicer
A: 

You probably need to use the !important designator to make sure that your hover style overrides the background defined int he class:

tr:hover { 
    background-color: #FFFFAF0 !important;
    color: #000 !important; 
} 

Interestingly, this won't work for IE6 because that browser only applies hover to a tags.

BC
thanks for ur answer but this is not the case, the hover back. colour gets applied without a problem. i guess '!important' is just optional (not too sure). But Nick Craver's suggestion above did the trick.
Vicer
A: 

The CSS instructions within the classname takes precedence over the <tr> instructions.

To fix this, use td.summarypage-odd-column:hover, td.summarypage-even-column:hover inside your CSS.

Note: If you're using IE6, the :hover only works on links, i.e. a:hover.

thanks but 'td.summarypage-odd-column:hover' only highlights each data cell dsnt it? I want the entire row to be highlighted. Nick's answer 'tr:hover td' is the way to go. but if you want to treat a set of cells within the row differently you can use smthin similar to wht u suggest.For example, not to highlight empty cells: --> tr:hover td.empty-cells{ ...table bk colour here...} <-- will do.
Vicer