表格均匀/奇怪样式会在鼠标悬停在Google Chrome浏览器上时发生变化

Question

我有一张如下图表，通过css将图像设为偶数/奇数行 刷新页面时，Google Chrome浏览器上的问题：偶数/奇数行不同，当鼠标悬停在页面上或桌面偶数/奇数位置时更改。
可以在以下位置查看： http://jsfiddle.net/uSDNg/

打开/刷新页面时：

在页面上移动鼠标或将鼠标悬停在桌面上时:(行偶数/奇数样式改变位置）

CSS代码：

#table_box
{
    width:100%;
    font-size: 11px;
    border-collapse: collapse;
    text-align:center;
}
#table_box th
{
    padding:7px;
    color: #292929;
}
#table_box td
{
    padding: 4px 0 4px 0;
    color: #464646;
    border:1px solid #cecece;
}
.maintb th{
    background-color:#174797;
    color:#FFF!important;
}
#table_box tr:nth-child(odd) td { background-color:#ffffff } /*odd*/
#table_box tr:nth-child(even) td { background-color:#f0f0f0} /* even*/
#table_box tr:hover td { background-color:#fffbae; } /* hovering */

HTML代码：

<table id="table_box" class="maintb">
<tr>
    <th>سال</th>
    <th>ماه</th>
</tr>
    <tr>
        <td>1391</td>
        <td>آذر</td>
    </tr>
        <tr>
        <td>1391</td>
        <td>آبان</td>
    </tr>
        <tr>
        <td>1391</td>
        <td>مهر</td>
    </tr>
</table>

问题出在哪里？

Answer 1

将CSS更改为：

#table_box tr:nth-child(odd)  { background-color:#ffffff } /*odd*/
#table_box tr:nth-child(even) { background-color:#f0f0f0} /* even*/
#table_box tr:hover { background-color:#fffbae; } /* hovering */