Hover indication on a TR

Setting different CSS styles on the currently hovered-over row of a table using tr:hover. Make sure your page has a valid doctype set!

HTML

<table class="TableItemDetail">
    <tr><td>Content</td><td click="fun()">Content</td></tr>
    <tr><td>Content</td><td>Content</td></tr>
    <tr><td>Content</td><td>Content</td></tr>
    <tr><td>Content</td><td class="extraSpecial"><span id="specialContent">SPECIAL Content</span></td></tr>
    <tr><td>Content</td><td>Content</td></tr>
    <tr><td>Content</td><td>Content</td></tr>
</table>

CSS

.TableItemDetail
{
    FONT-WEIGHT: 400;
    FONT-SIZE: 9pt;
    COLOR: #000000;
    BACKGROUND-COLOR: #E6E5E3;
    border-collapse: collapse; 
}
.TableItemDetail td {
    padding: 5px;  
    border: 1px solid #000;    
}
.TableItemDetail tr:hover {
 background-color: #9999FF;   
 color: #ffffff;
}
.TableItemDetail td.extraSpecial:hover {
   background-color: #0000FF;
}

JavaScript

$(document).ready(function(e) {
  $(".TableItemDetail tr").click(function(){
    alert("12345")
  });
});