Hover effect on table row

Question

I have a table with a class applied and I want to add a hover effect to all rows with a specific class name. But this doesn't seem to work. Using chrome. Must work in IE8 as well. Can anyone help me get this working please?

html ->

<table class="myTable">
<tr class="myRow">
    <td>1</td>
</tr>
<tr>
    <td>2</td>
</tr>

css ->

.myTable.myRow tr:hover td{
 background-color:red;   

}

Here's a Fiddle

Answer 1

You can just use this:

.myRow:hover {
    background:red;   
}

fiddle

Answer 2

You have applied the class slightly wrong change it to:

.myTable tr.myRow:hover td{
     background-color:red;   
}

Reasoning being in your css you are saying find the class myTable that also has class myRow but its your tr element with the myRow class.