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. 给你看看我练习的oracle语句

    -------预算-- CREATE OR REPLACE VIEW V_YUSUAN_BGY_WZ20151204 AS SELECT tb_cube_fc05.pk_entity pk_org,/ ...

  2. android apk 防止反编译技术第一篇-加壳技术

    做android framework方面的工作将近三年的时间了,现在公司让做一下android apk安全方面的研究,于是最近就在网上找大量的资料来学习.现在将最近学习成果做一下整理总结.学习的这些成 ...

  3. 在Xcode6中找回失去的模板

    [Add]2014.07.27 添加OC category.protocol模板 Xcode 6从beta 3开始在创建新项目窗口中移除了“Empty Application”,如下: 其他选项很不幸 ...

  4. iOS中 常用的mac终端指令

    1.使用caffeinate阻止Mac运行屏幕保护和睡眠 caffeinate能阻止Mac进入睡眠状态,而且屏幕保护也不会激活.我们最好使用-t为命令加入具体的时间.比如下面的命令可以使Mac一小时内 ...

  5. HDU 1069 Monkey and Banana（动态规划）

    Monkey and Banana Problem Description A group of researchers are designing an experiment to test the ...

  6. Java异常（1）

    一.要达到的效果 如果出现错误而是某些操作没有完成,程序应该: (1)返回到一种安全状态,并能够让用户执行一些其他的命令. (2)允许用户保存所有操作的结果,并以适当的方式终止程序.   异常处理的任 ...

  7. Poj 1017 / OpenJudge 1017 Packets/装箱问题

    1.链接地址: http://poj.org/problem?id=1017 http://bailian.openjudge.cn/practice/1017 2.题目: 总时间限制: 1000ms ...

  8. Boot Petalinux Project Using a remote system

    通过jtag实现在远程服务器端下载petalinux image到连接在本地PC的开发板上的方法. 具体连接方式为 比如Host的系统为Windows,Remote system为运载在远程服务器上的 ...

  9. jQuery.ajax()的一些例子

    例子: Example: 保存数据到服务器,成功时显示信息. 1 2 3 4 5 6 7 $.ajax({ method: "POST", url: "some.php& ...

  10. svg学习笔记（一）

    SVG——可扩展适量图形,基于XML PC端:IE9+   wap端:表现良好,适合使用 基础图形: line(线段)  <line x1="25" y1="150 ...