Question

在桌面上设置偶数/奇数样式但是表格行的悬停不起作用 试一试：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>

怎么解决？

Answer 1

您需要重新排序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规则将始终优先于悬停，以及将背景颜色添加到<tr>，而不是之前的<td>。

Answer 2

在IE中，<!DOCTYPE>选择器必须声明:hover才能处理除<a>元素之外的其他元素。

请参阅http://www.w3schools.com/cssref/sel_hover.asp

Answer 3

我们不能

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

会让生活更轻松吗？

Answer 4

你可以通过为偶数和＆amp;设置CSS来实现。奇数表行

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

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

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

它不是完全在jsfiddle中工作，而是在大多数浏览器中工作

欢呼声!!!

Answer 5

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

您错过了td。尝试：

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

桌子悬停在桌子上，偶数/奇怪的样式通过CSS

5 个答案: