Question

嘿所有我有以下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>

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

我可能会过度思考，因为它看起来应该很容易。

任何帮助都会很棒！谢谢！

Answer 1

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

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

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

1 个答案: