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

Answer 1

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>

Answer 2

You could try:

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

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

JS Fiddle demo.

Answer 3

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.

Answer 4

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

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

Answer 5

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>

Answer 6

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