jQuery仅在选定行上不从CSS悬停

嘿，我有以下CSS，它告诉我一旦鼠标在表格行上滚动，表格就会显示不同的颜色：

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);  
}

现在这很好，但在那张表上有一些章节，我不希望它这样做。我曾尝试使用jQuery在行的某些部分禁用悬停效果，我不需要它，但我似乎没有正确的代码来实现这一点

$("#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>

$（“#optionBoxMiddle”）.hover（函数（）{
$（this.css（{“背景”：“#fafafa”}）；
});
显示地图


供应商

#fafafa颜色是表的颜色，鼠标不悬停在表上。optionBoxMiddle是我需要的行的id，不需要在其上使用悬停效果

我可能想得太多了，因为这似乎很容易做到

---

任何帮助都会很好！谢谢

没有必要为此使用jQuery。只需使用css：

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