2

表格行上设置的偶数/奇数样式但表格行悬停不起作用。
试试看：http: //jsfiddle.net/w7brN/

CSS 样式：

#table_even tr:hover { background-color:#fffbae!important; } /* hovering */

#table_even tr:nth-child(odd) td { background-color:#fbfbfb } /*odd*/
#table_even tr:nth-child(even) td { background-color:#e8ecee } /* even*/

HTML 代码： 

<table id="table_even" style="width: 100%">
    <tr>
        <td>##</td>
        <td>##</td>
    </tr>
    <tr>
        <td>##</td>
        <td>##</td>
    </tr>
    <tr>
        <td>##</td>
        <td>##</td>
    </tr>
</table>

怎么解决？

4

5 回答 5

7

您需要重新排序 CSS 并添加<td>类似这样的内容：

   #table_even tr:nth-child(odd) td {
    background-color: #fbfbfb
} /*odd*/
#table_even tr:nth-child(even) td {
    background-color: #e8ecee
} /* even*/
#table_even tr:hover td {
    background-color: #fffbae;
} /* hovering */

否则，nth-child 规则将始终优先于悬停，以及您将背景颜色添加到s 之前<tr>，而不是<td>s 之前。

于 2012-09-05T15:38:30.923 回答
0

在 IE 中，必须 <!DOCTYPE>为:hover选择器声明 a 才能作用于该元素以外的其他<a>元素。

见http://www.w3schools.com/cssref/sel_hover.asp

于 2012-09-05T15:42:04.553 回答
0

我们不能有

$(this:even).css & $(this:odd).css

会让生活更轻松吗？

于 2013-03-02T10:45:58.193 回答
0

您可以通过为偶数和奇数表行设置 CSS 来实现

tr {background:#663366;}
tr:hover {background:#FF6633;}
tr.odd {background:#CCCCCC;}

$(document).ready(function () {$("tr:odd").addClass("odd");}):

请参阅此处的示例http://jsfiddle.net/Cpp3p/

它不能在 jsfiddle 中完全工作，但可以在大多数浏览器中工作

干杯！！！

于 2013-03-02T11:07:13.793 回答
0 
#table_even tr:hover { background-color:#fffbae!important; } /* hovering */

您只是缺少td. 尝试：

#table_even tr:hover td{ background-color:#fffbae!important; } /* hovering */
于 2015-02-20T14:15:47.453 回答