导航：首页 > 开发技术 >

如何实现当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同

发表于：2026-11-03 作者：千家信息网编辑

千家信息网最后更新 2026年11月03日，这篇文章主要介绍"如何实现当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同"，在日常操作中，相信很多人在如何实现当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同问题上存在疑惑，小编查阅了各式资料，整理

千家信息网最后更新 2026年11月03日如何实现当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同

这篇文章主要介绍"如何实现当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同"，在日常操作中，相信很多人在如何实现当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"如何实现当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

代码如下:

table test

姓名	性别	班级
姓名	男	计算机科学与技术一班
段萌	男	软工一班
段萌	男	软工一班
段萌	男	软工一班
段萌	男	软工一班

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 2014-7-9, 14:24:31
Author : Administrator
*/
body{ margin:0 auto; text-align:center}
/*设置表头的margin为0则表居中显示，border为0则无边界*/
table{margin:0 auto;
border:0px;
solid:#000
}
/*设置th表头的属性，font-weight为bold则显示为黑粗*/
table tr th{ height:28px;
width: auto;
line-height:28px;
background:#999;
font-weight:bold
}
table tbody tr{
height:28px;
line-height:28px;
text-align:center;
background:#FFF;
vertical-align:middle;
}
/*
*设置鼠标经过颜色的变化
*/
/*采用csss的这个方法，获得奇数行，让后设置其属性，这样避免使用expression这个容易出错的方法*/
table tbody tr:nth-child(odd){
background-color: #DEDEDE
}

table tbody tr:hover{
background-color: #CCCCCC;
}

到此，关于"如何实现当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！

很赞哦！