Changing background colour of tr element on mouseover

Question

I want to have my table rows highlighted on mouse over, but I have yet to find a way to do it that isn't using Javascript. Is this not possible in CSS?

I've tried this:

tr:hover {     background: #000; } 

But that doesn't work. Using td:hover works, but I want to change the background colour of the whole table row.

Is there a pure CSS/HTML way to do it, or am I going to have to resort to Javascript?

Answer 1

<tr>s themselves are very hard to access with CSS, try tr:hover td {background:#000}

Answer 2

You could try:

tr:hover {     background-color: #000; }  tr:hover td {     background-color: transparent; /* or #000 */ } 

JS Fiddle demo.