纯CSS3代码实现表格奇偶行异色，鼠标悬浮变色

最新推荐文章于 2022-08-06 14:45:32 发布

weixin_33774883

最新推荐文章于 2022-08-06 14:45:32 发布

阅读量288

点赞数 1

原文链接：http://www.cnblogs.com/audi-car/p/4746375.html

版权

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这段代码的位置不一样。

以下是完整的代码：

<!DOCTYPE html>
<html>
    <head>
        <title>表格奇偶行异色</title>
        <meta charset="utf-8">
        <style type="text/css">
            *{
                margin:0px auto;}
            
            tr:nth-child(odd){
                background-color:#CFF;}
            tr:nth-child(even){
                background-color:#699;}
            tr:hover{
                background-color:#F0C;}
            
        </style>
    </head>
    
    <body>
        <table>
            <tr>
                <td>第一行</td>
            </tr>
            
            <tr>
                <td>第二行</td>
            </tr>
            
            <tr>
                <td>第三行</td>
            </tr>
            
            <tr>
                <td>第四行</td>
            </tr>
        </table>
    </body>
</html>

浏览器内运行截图：

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

转载于:https://www.cnblogs.com/audi-car/p/4746375.html

weixin_33774883

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
纯CSS3代码实现表格奇偶行异色，鼠标悬浮变色

1、首先会用到<tr></tr>元素两个伪类，nth-child()和hover。然后需要注意的是伪类都是通过冒号引用的，不是点号，即tr:hover{} 其次，CSS代码中要注意顺序。 tr:nth-child(odd){ background-color:#CFF;}tr:nth-child(even){ background-...
复制链接

扫一扫