表格划過變色之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/