1、首先会用到<tr></tr>元素两个伪类，nth-child()和hover。

然后需要注意的是伪类都是通过冒号引用的，不是点号，即tr:hover{}

其次，CSS代码中要注意顺序。

tr:nth-child(odd){
       background-color:#CFF;}tr:nth-child(even){
       background-color:#699;}tr:hover{
       background-color:#F0C;}

写成这样是可以正常完成所需要的功能的，但是

如果你写成：

tr:hover{
       background-color:#F0C;}tr:nth-child(odd){
       background-color:#CFF;}tr:nth-child(even){
       background-color:#699;}

那么很抱歉，hover的功能是不能实现的。只能实现奇偶行异色，不能实现悬浮变色。

以上两端代码的位移区别就是tr:hover这段代码的位置不一样。

以下是完整的代码：

                    
                                 
     
第一行
第二行
第三行
第四行
    

浏览器内运行截图：

这个时候鼠标悬停在第三行。