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


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与google map api结合使用 控件,监听器
Mar 04 Javascript
JS获取网页属性包括宽、高等等
Apr 03 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
vue 注册组件的使用详解
May 05 Javascript
解决bootstrap-select 动态加载数据不显示的问题
Aug 10 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
JavaScript实现星级评价效果
May 17 Javascript
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并发访问实例代码
2012/09/06 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
常用简易JavaScript函数
2009/04/09 Javascript
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
jQuery Dom元素操作技巧
2018/02/04 jQuery
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
python的变量与赋值详细分析
2017/11/08 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
python实现名片管理系统
2018/11/29 Python
如何通过python画loss曲线的方法
2019/06/26 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
Python的互斥锁与信号量详解
2019/09/12 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
计算机维护专业推荐信
2014/02/27 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
综合测评自我评价
2015/03/06 职场文书
离婚民事起诉状
2015/08/03 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
解析原生JS getComputedStyle
2021/05/25 Javascript
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL