Table TR hover效果
今天我在给一个站增加一个table的hover效果,也就是鼠标移上去,有一个效果,像a链接一样鼠标移上去有一个变色的效果,网上找了半天,终于找到。用onMouse实现的。很简洁的几行代码,把代码记在这里下,方便自己也方便后遇到这样问题的朋友。
分为两部分
第一部分:CSS部分
既然是hover效果,我们就要有一个css来定义。
style如下:
1 2 | .tr-over{background-color:#F3F3F3;} .tr-out{background-color:#FFF;} |
第二部分:html代码部分
1 2 3 4 5 6 7 8 | <table style="width:320px; table-layout:fixed;"> <tr onclick="location='#'" onmouseover="this.className='tr-over'" onmouseout="this.className='tr-out'"> <td width=35% style="white-space:nowrap; overflow:hidden;">第一列相当长,是一个例子</td> <td width=20%>第二列</td> <td width=30%>第三列</td> <td width=15%>第四列</td> </tr> </table> |