当鼠标通过表数据线时,颜色不同,奇数和偶数行不同。

想必您已经遇到过这样的效果,也就是说,当鼠标通过时,颜色不同,奇偶行的颜色也不同。这种鼠标响应效果也可以在CSS中实现。下面是一个很好的示例代码,需要朋友参考。





复制代码代码如下所示:

<!——
若要更改此许可证标题,请在项目属性中选择许可标头。
要改变这个模板文件,选择工具模板|
并在编辑器中打开模板。
-->




测试表

表TBODY TR:悬停{
背景颜色:# eeeceb;
}
-->




全名
性别




全名
男性的
计算机科学与技术的一类


duanmeng
男性的
一类软作业


duanmeng
男性的
一类软作业


duanmeng
男性的
一类软作业


duanmeng
男性的
一类软作业




*
若要更改此许可证标题,请在项目属性中选择许可标头。
要改变这个模板文件,选择工具模板|
并在编辑器中打开模板。
* /
*
创建:2014-7-9,14:24:31
作者:管理员
* /
身体{边缘:0自动;文本对齐:中心}
*为0米显示中心的边缘设置页眉,0边框*无边框
表{空白:0自动;
边境:0px;
固体:# 000
}
属性集头,字体粗细加粗显示为黑色。
表格TR TH {身高:28px;
宽度:自动;
行高:28px;
背景:# 999;
字体粗细:粗体
}
表TBODY TR {
身高:28px;
行高:28px;
文本对齐:中心;
背景:# FFF;
垂直对齐:中间;
}
*
*设置鼠标的颜色变化
* /
由中国 / *的方法,得到奇数行,然后设置其属性,所以使用的表达方法来避免出错。
表TBODY TR:nth-child(奇数){
背景颜色:# Dedede
}

表TBODY TR:悬停{
背景颜色:# cccccc;
}