Sort table using tablesorter and change background on hovering the even and odd rows

Question

http://jsfiddle.net/6ecr4/8/

$(document).ready(function () {
    $(".items").tablesorter();
    $('.items tr:even').addClass('ItemEvenRow');

    $('.items tr').hover(function () {
        $(this).addClass("ItemRowHover");
    }, function () {
        $(this).removeClass("ItemRowHover");
    });
});

HTML :

<table class="items"> 
<thead> 
<tr class=""> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>jsmith@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr>  
    <td >Bach</td> 
    <td >Frank</td> 
    <td >fbach@yahoo.com</td> 
    <td >$50.00</td> 
    <td >http://www.frank.com</td> 
</tr> 
<tr > 
    <td  >Doe</td> 
    <td >Jason</td> 
    <td>jdoe@hotmail.com</td> 
    <td  >$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>tconway@earthlink.net</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table> 

The even rows do not possess the hover, but only the odd ones. Require both, even, as well as, odd rows to change their background on mouse-over. The headers should be as they are without any changes.

Answer 1

The hover isn't working on even rows because of css precedence. Make the selector more specific like this (add a tr in front; updated demo ):

tr.ItemRowHover  {background-color:#A00000; }