jQuery no hover from CSS only on selected rows

Question

Hey all I have the following CSS that tells me table to show a different color once the mouse rolls over the tables row:

table#showDataTbl tr:hover td {
    background: #f2f2f2;
    background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
    background: -moz-linear-gradient(top,  #f2f2f2,  #f0f0f0);  
}

Now that works well but there are sections on that table I do not wish for it to do this. I have tried using jQuery to disable the hover effect on parts of the row I need it not to do but I do not seem to have the correct code to do that.

$("#optionBoxMiddle").hover(function() {
    $(this).css({"background":"#fafafa"});
});

<tr id="optionBoxMiddle">
   <td height="100" colspan="2">
      <INPUT id="chkMap" type="checkbox" name="chkMap" checked>
         <LABEL for="chkMap" class="regStyleFont">Display Map</LABEL>
      <BR>
      <INPUT id="chkRep" type="checkbox" name="chkRep">
         <LABEL for="chkRep" class="regStyleFont">Provider</LABEL>
   </td>
</tr>

The #fafafa color is the color that the tables are without the mouse hovering over them. The optionBoxMiddle is the id of the row that I need it not to use the hover effect on.

I may be over-thinking this as it seems it should be pretty easy to do.

Any help would be great! Thanks!

Answer 1

There is no need to use jQuery for this. Just use css:

#optionBoxMiddle:hover td{background:#fafafa!important;}