<!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. Karma与TSLint

    TSLint TSLint是一个可扩展的静态分析工具,用于检查TypeScript代码的可读性,可维护性和功能性错误.收到现代编辑和构建系统的广泛支持,并且可以使用您自己的路由,配置和格式化. 安装 ...

  2. 【xml_Class、xmlElementNode_Class 类】使用说明

    xml_Class.xmlElementNode_Class这两个类是针对XML相关操作的类. 1.xml_Class类是针对XML文档操作的类 目录: 类型 原型 参数 返回 说明 Sub Sub ...

  3. Spring学习（3）：Spring概述（转载）

    1. Spring是什么? Spring是一个开源的轻量级Java SE(Java 标准版本)/Java EE(Java 企业版本)开发应用框架,其目的是用于简化企业级应用程序开发. 在面向对象思想中 ...

  4. Python基础灬列表&字典生成式

    列表生成式 # 求1~10偶数的平方 # 1.常规写法 a_list = [] for i in range(1, 11): if i % 2 == 0: a_list.append(i * i) p ...

  5. 33.[LeetCode] Search in Rotated Sorted Array

    Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. (i.e. ...

  6. wepy中如何使用stylus等样式预处理器

    wepy中如何使用stylus等样式预处理器 一.如何在wepy中使用stylus 1.安装wepy-compiler-stylus(以及stylus, stylus-loader) npm inst ...

  7. Java 学习笔记 ------第六章 继承与多态

    本章学习目标: 了解继承的目的 了解继承与多态的关系 知道如何重新定义方法 认识java.lang.object 简介垃圾回收机制 一.继承 继承是java面向对象编程技术的一块基石,因为它允许创建分 ...

  8. struts2文件上传突破2M限制

    struts配置文件 <action name="upload" class="strutsFileUpload"> <result name ...

  9. 软件图书，偏.net方向

    深入理解计算机系统(原书第2版) 作者:Randal E.Bryant:1981年在麻省理工学院获计算机科学博士学位,现任美国卡内基·梅隆大学计算机学院院长 内容: 深入浅出地介绍了处理器.编译器.操 ...

  10. 今目标登录时报网络错误E110

    今目标登录的时候报错了,错误代码:E110不论怎么修改都修复不了,百度相关资料也没有,只能联系客服. 经过好久终于联系上了客服,客服给出的解决方案是修改:Enternet选项: 第一步:打开,控制面板 ...