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>

浏览器内运行截图：

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

纯CSS3代码实现表格奇偶行异色，鼠标悬浮变色的更多相关文章

  1. 用jquery控制表格奇偶行及活动行颜色

    虽然jquery流行已经很多年了,一直都感觉很难,也没有花时间去学习它,只是偶尔哪天心血来潮了去看一点点,时隔多日又会忘得一干二净.最近用到表格奇偶行不同色,不得不去再看jquery,虽然感觉还是难, ...

  2. 一款简洁的纯css3代码实现的动画导航

    之前为大家介绍了好多导航菜单,今天给大家分享一款简洁的纯css3代码实现的动画导航.鼠标经过的时候以背景色以菱形渐变为长方形.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  3. DEV GridControl TableView隔行换色/奇偶行换色

    GridControl中的TableView“奇偶行换色”这件事情纠结了我好几天,虽然已经是上个月的事情,好歹记录一下吧,万一有谁要用到呢. GridControl是长这个样子的, <dxg:G ...

  4. CSS3的nth-child() 选择器，表格奇偶行变色

    nth-child() 应用背景 CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个js判断,来加一个css,从而使表格偶数行和奇数行颜色不一 ...

  5. 纯css3代码写九宫格效果

    主要用到css3中的transition和布局知识.代码如下 <!DOCTYPE html> <html lang="en"> <head> & ...

  6. 纯css3代码写无缝滚动效果

    主要用到css3中的动画 @keyframes, animation. 布局是外层一个div宽固定,然后overflow hidden 绝对定位,里面的ul 固定定位.通过对ul添加动画来实现效果.具 ...

  7. 纯CSS3代码实现简单的图片轮播

    以4张图片为例:1.基本布局:将4张图片左浮动横向并排放入一个div容器内,图片设置统一尺寸,div宽度设置4个图片的总尺寸,然后放入相框容器div,相框设置1个图片的大小并设置溢出隐藏,以保证正确显 ...

  8. 纯css3代码写下拉菜单效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 滑动开关效果 css3滑动开关】纯CSS3代码实现滑动开关效果-css3滑动效果-css3左右滑动

    今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动效果. 今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动 ...

随机推荐

  1. C#中的集合

    [集合不同于数组,是一组可变类型的.可变数量的元素的组合,这些元素可能共享某些特征,需要以某种操作方式一起进行操作.一般来讲,为了便于操作这些元素的类型是相同的] [集合与数组的区别:数组是连续的.同 ...

  2. UIButton 未响应原因分析

    1.父视图响应者链被阻断;例如:在 UILabel,UIImageView 控件添加UIButton,因为UILabel(userInteractionEnabled属性值为NO) 阻断了响应者链,所 ...

  3. SQL 不同的数据类型

    SQL 不同的数据类型 1.SQL TEXT 2.SQL VARCHAR(SIZE) VARCHAR(X) Case: user name, email, country, subject, pass ...

  4. DLL详解及Denpendcy Walker的使用

    下面的文章被N次转载,为了尊重原作,\(^o^)/~,贴出最早发布这篇文章的地址及作者.   动态链接库 Windows的活动大陆 2006-07-26 09:21  作者:狂ρκ来源:电脑爱好者 在 ...

  5. <<深入Java虚拟机>>-第三章-垃圾收集器与内存分配策略-学习笔记

    垃圾收集 垃圾收集(Garbage Collection,GC),垃圾收集需要完成的三件事情. 哪些对象需要回收 什么时候回收 如何回收 如何确定对象已死(即不可能在被任何途径引用的对象) 引用计数算 ...

  6. python 自动化之路 day 01.1 数据类型

    一.变量二.数据类型2.1 什么是数据类型及数据类型分类2.2 标准数据类型:2.2.1 数字2.2.1.1 整型:2.2.1.2 长整型long:2.2.1.3 布尔bool:2.2.1.4 浮点数 ...

  7. 使用Class.getResource和ClassLoader.getResource方法获取文件路径

    自从转投Java阵营后,一直发下Java程序的路径读取异常麻烦,因此查阅了比较多的版本内容,整合了一份自己的学习笔记.主要使用Class及通过ClassLoader来动态获取文件路径. 查阅链接如下: ...

  8. Linux CPU亲缘性详解

    前言 在淘宝开源自己基于nginx打造的tegine服务器的时候,有这么一项特性引起了笔者的兴趣.“自动根据CPU数目设置进程个数和绑定CPU亲缘性”.当时笔者对CPU亲缘性没有任何概念,当时作者只是 ...

  9. Unity帮助文档打开速度慢解决方法

    使用批量文本替换工具替换掉Unity安装目录中\Editor\Data\Documentation\en\Manual\下的所有文件中的如下两个部分:   1. <script type=&qu ...

  10. 省市选择(基于zepto.js)

    效果如下: <div class="clList overflow-h mt75"> <select class="pull-left cl-35 se ...