表格划过变色之tr:hover无效,td:hover有效解决方法
2013-05-20 11:06
309 查看
首先IE6不支持非A标签的伪类,这里不考虑IE6,,html代码如下:
<table width="16%" border="0" cellpadding="1" cellspacing="0">
<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;}
转自
http://aykkk.blog.163.com/blog/static/161779533201172444353509/
<table width="16%" border="0" cellpadding="1" cellspacing="0">
<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;}
转自
http://aykkk.blog.163.com/blog/static/161779533201172444353509/
相关文章推荐
- 表格Table宽度设置无效的解决方法
- EasyTouch绑定事件在电脑上点击有效Android上无效的解决方法
- 获取表格的方法:sheet1$不是一个有效的名称,请确保它不包括无效的字符或标点,或字符不要太长
- Win8/8.1下驱动安装“数据无效”错误的有效解决方法
- KSImageNamed 安装后无效解决方法(试过有效)
- Html table td里使用overflow:hidden无效解决方法
- table设置td文本超出为省略号无效的解决方法
- 表格Table宽度设置无效的解决方法
- jQuery在html有效在jsp无效的原因及解决方法
- 有关td使用colspan属性后导致td不能充满整个tr的问题解决方法
- table表格设置td宽度不起作用解决方法
- jQuery在html有效在jsp无效的原因及解决方法
- jQuery移除tr无效的解决方法(tr是动态添加)
- 表格Table宽度设置无效的解决方法
- css a:hover下的span样式无效的解决方法
- ie6中hover无效的解决方法
- csshover.htc在IE7下使用:active伪类无效解决方法
- 回发或回调参数无效 完美有效 解决方法
- 解决表格设置table-layout:fixed后单元格宽度设置无效的方法
- Win8/8.1下驱动安装“数据无效”错误的有效解决方法