实现隔行换色效果的两种方式【实用】


Posted in Javascript onNovember 27, 2016

纯CSS方式实现隔行颜色交替、鼠标经过高亮颜色:

<html>
<head>
 <title></title>
 <style type="text/css">
 ul{list-style:none}

 li:nth-child(odd){background-color:#eee}
 li:hover{background-color:Yellow}
 </style>
</head>
<body>
 <ul>
 <li>111</li>
 <li>111</li>
 <li>111</li>
 <li>111</li>
 <li>111</li>
 <li>111</li>
 <li>111</li>
 </ul>
</body>
</html>

js方式实现隔行颜色交替、鼠标经过高亮颜色:

<html>
<head>
 <title></title>
 <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
 <style type="text/css">
 .alter-item {
  background-color: #eee;
 }

 .hightlight {
  background-color: Yellow;
 }
 </style>

 <script type="text/javascript">
 $(function () {
  //隔行颜色
  $("ul li:odd").addClass("alter-item");

  method1();
 });

 //方法1:
 function method1() {
  $("ul li").hover(function () {
  $(this).addClass("hightlight");
  }, function () {
  $(this).removeClass("hightlight")
  });
 }

 //方法2:
 function method2() {
  $("ul li").mouseover(function () {
  $(this).addClass("hightlight").siblings().removeClass("hightlight");
  });
 }
 </script>
</head>
<body>
 <ul>
 <li>111</li>
 <li>222222222</li>
 <li>111</li>
 <li>444444444444444444444</li>
 <li>111</li>
 <li>111</li>
 <li>111</li>
 </ul>
</body>
</html>

以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
读jQuery之六 缓存数据功能介绍
Jun 21 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
javascript实现无法关闭的弹框
Nov 27 #Javascript
js格式化时间的简单实例
Nov 27 #Javascript
浅谈jquery页面初始化的4种方式
Nov 27 #Javascript
js实现页面刷新滚动条位置不变
Nov 27 #Javascript
Javascrip实现文字跳动特效
Nov 27 #Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 #Javascript
Angularjs之filter过滤器(推荐)
Nov 27 #Javascript
You might like
PHP session会话的安全性分析
2011/09/08 PHP
php 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
Pyramid添加Middleware的方法实例
2013/11/27 Python
python集合用法实例分析
2015/05/30 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
python中adb有什么功能
2020/06/07 Python
迪奥美国官网:Dior美国
2019/12/07 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
中层干部岗位职责
2013/12/18 职场文书
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
人力资源管理专业自荐书范文
2014/02/10 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
敬老月活动总结
2014/08/28 职场文书
人民调解协议书范本
2014/10/11 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
详解Python内置模块Collections
2022/03/22 Python
Go 中的空白标识符下划线
2022/03/25 Golang
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android