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. JavaScript总结3—对象

    对象是JavaScript的基本类型,他可以从一个称为原型的对象继承属性,这种原型式继承是JavaScript的核心特征.对对象比较常见的操作有:创建,设置,查找,删除,检测和枚举他的属性.每个对象都 ...

  2. 对于jdk jre jvm的简单认识

    1:名词解释 jdk:java  develop  kit:java开发工具包 jre:java runtime  environment :java开发运行时环境 jvm:java virtua m ...

  3. 关于Collections中的sort()方法总结

    用Java集合中的Collections.sort方法对list排序的两种方法 本文部分引用自:http://my.oschina.net/leoson/blog/131904 用Collection ...

  4. centos_Error: Protected multilib versions_解决方法

    在yum命令后面加入忽略参数:--setopt=protected_multilib=false you can also use --setopt=protected_multilib=false ...

  5. oracle交集,并集,差集

    引自:http://www.2cto.com/database/201308/238777.html [sql] create table test1 ( name ), NN ) ); insert ...

  6. 基于游标的定位DELETE/UPDATE语句

    如果游标是可更新的(也就是说,在定义游标语句中不包括Read Only 参数),就可以用游标从游标数据的源表中DELETE/UPDATE行,即DELETE/UPDATE基于游标指针的当前位置的操作: ...

  7. [MAXscript Tool]TimeSlider v1.3

    一个简单的小工具,方便在MAX里面快速的修改帧速率,像maya一样.具体看视频演示.

  8. 九度OJ 1533 最长上升子序列 -- 动态规划

    题目地址:http://ac.jobdu.com/problem.php?pid=1533 题目描述: 给定一个整型数组, 求这个数组的最长严格递增子序列的长度. 譬如序列1 2 2 4 3 的最长严 ...

  9. OpenJudge/Poj 1159 Palindrome

    1.链接地址: http://bailian.openjudge.cn/practice/1159/ http://poj.org/problem?id=1159 2.题目: Palindrome T ...

  10. Java_log4j

      Log4j是Apache的一个开放源代码项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.GUI组件,甚至是套接口服务器.事件记录器等:我们也可以控制每一条日志的输出格式: ...