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


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 相关文章推荐
Javascript算符的优先级介绍
Mar 20 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
vue better scroll 无法滚动的解决方法
Jun 07 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 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下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
Linux基于php-fpm模式的lamp搭建phpmyadmin的方法
2018/10/25 PHP
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
Python科学计算环境推荐——Anaconda
2014/06/30 Python
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
解析Python中的二进制位运算符
2015/05/13 Python
详解python3百度指数抓取实例
2016/12/12 Python
python入门教程之识别验证码
2017/03/04 Python
python中模块的__all__属性详解
2017/10/26 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
Python中six模块基础用法
2019/12/08 Python
在python中使用nohup命令说明
2020/04/16 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
怎样声明接口
2014/09/19 面试题
2014年元旦感言
2014/03/06 职场文书
共产党员公开承诺书
2014/03/25 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
公司禁烟通知
2015/04/23 职场文书
Java tomcat手动配置servlet详解
2021/11/27 Java/Android
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers