[html] Changing background colour of tr element on mouseover

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?

Try it

<!- HTML -->
<tr onmouseover="mOvr(this,'#ffa');" onmouseout="mOut(this,'#FFF');">

<script>
function mOvr(src,clrOver) { 
  if (!src.contains(event.fromElement)) { 
  src.bgColor = clrOver; 
  } 
} 
function mOut(src,clrIn) { 
  if (!src.contains(event.toElement)) { 
  src.bgColor = clrIn; 
  } 
} 
</script>

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

tr:hover td.someclass {
   background: #EDB01C;
   color:#FFF;
}

only someclass cell highlight

You could try:

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

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

JS Fiddle demo.

its easy . Just add !important at the end of your css line :

tr:hover {    background: #000 !important; }

This will work:

tr:hover {
    background: #000 !important;
}

If you want to only apply bg-color on TD then:

tr:hover td {
    background: #c7d4dd !important;
}

It will even overwrite your given color and apply this forcefully.

I had the same problem:

tr:hover { background: #000 !important; }

allone did not work, but adding

tr:hover td { background: transparent; }

to the next line of my css did the job for me!! My problem was that some of the TDs already had a background-color assigned and I did not know that I have to set that to TRANSPARENT to make the tr:hover work.

Actually, I used it with a classnames:

.trclass:hover { background: #000 !important; }
.trclass:hover td { background: transparent; }

Thanks for these answers, they made my day!! :)

You can give the tr an id and do it.

tr#element{
    background-color: green;
    cursor: pointer;
    height: 30px;

}

tr#element:hover{
    background-color: blue;
    cursor: pointer;

}

<table width="400px">
<tr id="element">
<td></td>
</tr>
</table>

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