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. Cadence画封装的步骤

    画封装的步骤 打开 pad designer       through 通孔       single  表贴      在焊盘设置时,soldermask层要比pastmask大0.1毫米     ...

  2. gitHub添加公钥

    gitHub添加公钥 gitHub是通过SSH公钥连接到现有仓库的 设置SSH Key ssh-keygen -t rsa -C "your_email@example.com"G ...

  3. -bash: lampp: command not found解决方案

    在/opt目录下安装完lampp后,需要到/opt/lampp/下执行lampp启动或者停止服务,如果在其余目录下执行lampp,会提示:-bash: lampp: command not found ...

  4. uiautomator做自动化的过程

    UIautiomator官网地址:http://android.toolib.net/sdk/index.html 1.环境搭建 使用uiautomator需要导入jar包,uiautomator.j ...

  5. android之手动安装apk到模拟器

    一.将apk放到SDK的指定路径 二.打开命令行 三.安装apk到模拟器 此处遇到无法找到主机,解决办法: 发现是进程2512堵塞导致的 进入powershell 查看进程 发现2512进程是360手 ...

  6. Hadoop基于Protocol Buffer的RPC实现代码分析-Server端

    http://yanbohappy.sinaapp.com/?p=110 最新版本的Hadoop代码中已经默认了Protocol buffer(以下简称PB,http://code.google.co ...

  7. linux时间自动同步

    1,修正本地时区及ntp服务 #yum -y install ntp#rm -rf /etc/localtime#ln -s /usr/share/zoneinfo/Asia/Shanghai /et ...

  8. iOS block的使用

    明明知道block是一个很重要的知识点,很久不用就又忘了,这是在网上看到的一个例子.(晚上回去整理另外的一个) 在视图A上有一个按钮(用来在点击的时候推出视图b)和一个label(用来显示从b传回来的 ...

  9. OC5_构造方法与self指针

    // // Dog.h // OC5_构造方法与self指针 // // Created by zhangxueming on 15/6/9. // Copyright (c) 2015年 zhang ...

  10. Codevs 2611 观光旅游(floyed最小环)

    2611 观光旅游 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description 某旅游区里面有N个景点.两个景点之间可能直接有道路相连,用 ...