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>

Leave a Reply

You must be logged in to post a comment.

RSS feed for comments on this post. TrackBack URL