tr:hover无效，td:hover有效解决方法

崋果山 2017-09-07

展开全文

首先IE6不支持非A标签的伪类，这里不考虑IE6,，html代码如下：

<tr>
    <th bgcolor="#009900" > </th>
    <th bgcolor="#009900" > </th>
</tr>
<tr>
    <td bgcolor="#33CCFF">rtrtrtr</td>
    <td bgcolor="#33CCFF">rtrtr</td>
</tr>
<tr>
    <td bgcolor="#33CCFF"> </td>
    <td bgcolor="#33CCFF">rtrtr</td>
</tr>
<tr>
    <td bgcolor="#33CCFF">rtrtr</td>
    <td bgcolor="#33CCFF"> </td>
</tr>
<tr>
    <td bgcolor="#33CCFF"> </td>
    <td bgcolor="#33CCFF"> </td>
</tr>
<tr>
    <td bgcolor="#33CCFF"> </td>
    <td bgcolor="#33CCFF">rtrtr</td>
</tr>
<tr>
    <td bgcolor="#33CCFF"> </td>
    <td bgcolor="#33CCFF">trtrtrtrt</td>
</tr>
<tr>
    <td bgcolor="#33CCFF"> </td>
    <td bgcolor="#33CCFF"> </td>
</tr>
<tr>
    <td bgcolor="#33CCFF"> </td>
    <td bgcolor="#33CCFF"> </td>
</tr>
</table>

css代码如下：

table { border-top:1px solid #fff; border-left:1px solid #fff;
}
tr{background-color:#fff; height:30px;}
th{border-right:1px solid #fff; border-bottom:1px solid #fff;}
td{border-right:1px solid #fff; border-bottom:1px solid #fff;}
tr:hover{background-color:#CCCC00;}

发现tr:hover不起作用，但是改成td:hover就能起作用，但这不是我们所要的效果，查资料后发现原因是td的背景色会覆盖tr的背景色，找到原因就好办了，在tr:hover下边加上一句：tr:hover td{background:none;}

OK，搞定