Question

If I have a table:

<table border="1" id="my_table">
    <tr>
        <td> data-1</td>
        <td> data-1</td>
        <td> data-1</td>
    </tr>

    <tr>
        <td> data-2</td>
        <td> data-2</td>
        <td> data-2</td>
    </tr>

</table>

I would like to add hover background for each column or the row, that’s for each <td> of the hovered row, I can do this by using javascript like below:

 $('#my_table tr').hover(function() {
    $(this).children('td').css('background-color', '#330099');
  }, function() {
    $(this).children('td').css('background-color', '');
  });

The above js code working nicely, my question is how to use CSS to approach the same result?

What I tried is

tr > td:hover{
    background-color: #330099;
}

but the above code only change one <td>‘s background color instead of all <td>s’ of the row. How to get rid of this?

My code is here on jsfiddle.

————————————By The Way———————————–

Please DO NOT suggest me to just use :

tr:hover{background-color: #440099}

I know this is working, but for my special need, I would prefer to change all <td>s’ background color when mouse hover a certain row, just like what the js code did.

Because I have set my <td> background which will hide the tr:hover feature behind the back, so, I have to change <td>‘s background explicitly. (this is not in my sample code above though)

Answer 1

How about:

tr:hover td {background-color: #440099;}

http://jsfiddle.net/mM2Ep/

Hope that helps 🙂