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. CentOS下modelsim 10.2c install & crack

    install: 1. install is easy to all : run install.linux 2 crack: this section is important: a. instal ...

  2. jQuery 黑白插件

    1 add jQuery and plug in to the page <script src="js/jquery.min.js"></script> ...

  3. ASP申请单动态添加实现方法及代码

    一个申请单可以包含N个项目,添加申请单时就需要动态加入代码了. 动态Table表格 以下为引用的内容: <table border="0" width="98%&q ...

  4. C#学习笔记9：C#中的变量、转义符、显式转换和隐式转换

    1.变量的特性:可以重复的赋值 int a=4;  a=9; 2.常量:const int  number=10:这个常量不可变 如果你声明的变量,不想被其他人修改,那么就修饰为常量 声明在类的下面, ...

  5. 打包C#程序

    开源中国. 今天来使用VS2010对C#程序进行打包发布. 我们有一个C#程序.程序很简单,我们需要对它进行发布. Contents 步骤: 建立一个安装项目.我们得到了一个Setup1项目. 在应用 ...

  6. 第三篇、CSS样式简介

    <!--1.行内样式 <p style="background-color:red;font-size:20px"> --> <!--2.页内样式 & ...

  7. JavaScript学习笔记(7)——JavaScript语法之函数

    函数就是包裹在花括号中的代码块,前面使用了关键词 function: function functionname() { //这里是要执行的代码 } 当调用该函数时,会执行函数内的代码. 可以在某事件 ...

  8. .net LINQ and PLINQ

    本文  学习自  微软官网文档   2016/12 LINQ 背景   以前写与DB 相关的代码, 程序员须要懂开发语言(C#, VB)和查询语言跟数据库交互. LINQ 的出现使应用程序形成基于集合 ...

  9. 用 CSS 隐藏页面元素的 5 种方法

    原文链接:用 CSS 隐藏页面元素的 5 种方法,转载请注明来源! 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 disp ...

  10. 使用qt制作简单的加法，乘法运算。

    1.首先构架qt应用项目 2.然后打开使用 Qt desinger打开 Fomr File 里的UI文件进行编辑 3.由于此程序只需点击加号,减号这两个按钮,所以设置了两个信号槽 4.然后是连接信号槽 ...