<!doctype html>

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>表格隔行变色_CSS实现鼠标悬停高亮</title>

    <meta name="keywords" content="" />

    <meta name="description" content="" />

    <script type="text/javascript" src="../jquery-1.8.2.js"></script>

    <script type="text/javascript">

    $(function(){

        //通过jQuery控制表格隔行换色，并鼠标悬停变色

        $('tr:even:gt(0)').addClass('tr_even');    //默认偶数行背景色，无视标题行用:gt(0)

        $('tr:odd').addClass('tr_odd');            //默认奇数数行背景色

        ////////////////////////////////////////////////////////////////

    });

    </script>

    <style type="text/css">

    .headCls{background-color:#ccc;}    /* 标题背景色 */

    .tr_even{background-color:#EBF8FF}  /* 偶数行背景色 */

    .tr_odd{background-color:#DDECF3}   /* 奇数行背景色 */

    .tr_even:hover,.tr_odd:hover{background-color:red;}      /* 通过CSS实现鼠标悬停高亮色 */

    </style>

</head>

<body>

    <table border="1" width="100%" cellspacing="0" cellpadding="0">

        <tr class="headCls">

            <th>CSS实现鼠标悬停高亮</th>

            <th>CSS实现鼠标悬停高亮</th>

        </tr>

        <tr>

            <td>data1_1</td>

            <td>data1_2</td>

        </tr>

        <tr>

            <td>data2_1</td>

            <td>data2_2</td>

        </tr>

        <tr>

            <td>data3_1</td>

            <td>data3_2</td>

        </tr>

        <tr>

            <td>data4_1</td>

            <td>data4_2</td>

        </tr>

        <tr>

            <td>data5_1</td>

            <td>data5_2</td>

        </tr>

    </table>

</body>

</html>

表格隔行变色_CSS实现鼠标悬停高亮的更多相关文章

  1. JavaScript实例---表格隔行变色以及移入鼠标高亮

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  2. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

  3. 表格隔行变色_jQuery控制实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  4. JS---案例：表格隔行变色(鼠标划过背景色恢复)

    案例:表格隔行变色(鼠标划过背景色恢复) <!DOCTYPE html> <html> <head lang="en"> <meta ch ...

  5. 用JQuery实现表格隔行变色和突出显示当前行

    用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...

  6. 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)

    一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...

  7. JS实现表格隔行变色

    用到的鼠标事件:(1)鼠标经过 onmouseover:(2)鼠标离开 onmouseout 核心思路:鼠标经过 tr 行的时候,当前行会改变背景颜色,鼠标离开的时候去掉背景颜色. 注意:第一行(th ...

  8. jquery实现html表格隔行变色

    效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...

  9. css3表格隔行变色和表格选中变颜色代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. appium+python自动化☞环境搭建

    前言:appium可以说是做app最火的一个自动化框架,它的主要优势是支持android和ios,另外脚本语言也是支持java和Python.略懂Python,所以接下来的教程是 appium+pyt ...

  2. Ubuntu 16.04 主题美化及常用软件安装

    一.主题美化 系统清理 系统更新: 安装完系统之后,需要更新一些补丁.Ctrl+Alt+T调出终端,执行一下代码: sudo apt-get update sudo apt-get upgrade 卸 ...

  3. intellij idea maven配置及maven项目创建

    1. 下载Maven 官方地址:http://maven.apache.org/download.cgi 解压并新建一个本地仓库文件夹 2.配置maven环境变量 3.配置配置本地仓库路径 4.配置阿 ...

  4. elasticsearch备份与恢复

    备注:以下代码在kibana插件下运行: # 创建一个备份用的仓库# type:fs文件系统# 支持Shared filesystem, Amazon S3, HDFS和Azure #Cloud# l ...

  5. Catch That Cow：BFS：加标记数组：不加标记数组

    Catch That Cow Problem Description Farmer John has been informed of the location of a fugitive cow a ...

  6. java引用Arcface，实现人脸识别（demo）

    ## 开发环境准备: ###开发使用到的软件和工具: * Jdk8.mysql5.7.libarcsoft_face.dll(so).libarcsoft_face_engine.dll(so).li ...

  7. [shell] 循环判断输入值

    做个记录 until [[ $flag == "yes" || $flag == "exit" ]] do read -p "请确认统一/合服前后数据 ...

  8. Beta阶段第一次网络会议

    Beta阶段第一次网络会议 游戏问题 游戏细节特征不够明显,大小虽然随着电脑分辨率的不同变化着,但是存在清楚的问题 游戏中的提示信息不够,玩家无法快速了解游戏 游戏中背景声音过于单一 游戏AI太简单 ...

  9. 福大软工1816：Beta（2/7）

    Beta 冲刺 (2/7) 队名:第三视角 组长博客链接 本次作业链接 团队部分 团队燃尽图 工作情况汇报 张扬(组长) 过去两天完成了哪些任务 文字/口头描述 为utils_wxpy.py添加注释 ...

  10. HDU 4747 Mex 递推/线段树

    题目链接: acm.hdu.edu.cn/showproblem.php?pid=4747 Mex Time Limit: 15000/5000 MS (Java/Others)Memory Limi ...