表格划过变色之tr:hover无效，td:hover有效解决方法

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

<table width="16%" border="0" cellpadding="1" cellspacing="0">

  <tr>
    <th bgcolor="#009900" >&nbsp;</th>
    <th bgcolor="#009900" >&nbsp;</th>
  </tr>
  <tr>
    <td bgcolor="#33CCFF">rtrtrtr</td>
    <td bgcolor="#33CCFF">rtrtr</td>
  </tr>
  <tr>
    <td bgcolor="#33CCFF">&nbsp;</td>
    <td bgcolor="#33CCFF">rtrtr</td>
  </tr>
  <tr>
    <td bgcolor="#33CCFF">rtrtr</td>
    <td bgcolor="#33CCFF">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#33CCFF">&nbsp;</td>
    <td bgcolor="#33CCFF">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#33CCFF">&nbsp;</td>
    <td bgcolor="#33CCFF">rtrtr</td>
  </tr>
  <tr>
    <td bgcolor="#33CCFF">&nbsp;</td>
    <td bgcolor="#33CCFF">trtrtrtrt</td>
  </tr>
  <tr>
    <td bgcolor="#33CCFF">&nbsp;</td>
    <td bgcolor="#33CCFF">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#33CCFF">&nbsp;</td>
    <td bgcolor="#33CCFF">&nbsp;</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;}

转自

http://aykkk.blog.163.com/blog/static/161779533201172444353509/

转载于:https://www.cnblogs.com/yun007/archive/2013/05/20/3088228.html