<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script type="text/javascript">

　　window.onload=function color(){

　　var box = document.getElementById("box");

　　var rows = box.querySelectorAll("li");

　　for(var i = 0; i < rows.length; i++){

　　　　rows[i].index=i;//index是自己array数组的一个属性，此处给它赋值原因：for循环同步，函数异步，i值无法像都是同步的时候i一次一遍，同步执行完才是异步

　　　　if(rows[i].index%2==0){

　　　　　　rows[i].style.background ="pink";

　　　　}else{

　　　　　　rows[i].style.background ="green";

　　　　}

　　　　rows[i].onmouseover=function(){

　　　　if(this.index%2==0){

　　　　　　this.style.background ="#c11";

　　　　}else{

　　　　　　this.style.background ="#1c1";

　　　　}

　　}

　　rows[i].onmouseout=function(){

　　　　if(this.index%2==0){

　　　　　　this.style.background ="pink";

　　　　}else{

　　　　　　this.style.background ="green";

　　　　}

　　}

}

}

</script>

<style>

*{

margin: 0;

padding: 0;

list-style-type: none;

}

li{

width: 500px;

height: 30px;

text-align: center;

line-height: 30px;

border-radius: 4px;

box-shadow: 0 2px 3px #ddd;

margin: 10px 0;

}

ul{ width: 500px;

margin: 100px auto;

}

</style>

</head>

<body>

　　<ul id="box">

　　　　<li id="dan">我是行</li>

　　　　<li>我是行</li>

　　　　<li class="dan">我是行</li>

　　　　<li>我是行</li>

　　　　<li class="dan">我是行</li>

　　　　<li>我是行</li>

　　</ul>

</body>

</html>

隔行变色&&鼠标移入变色的更多相关文章

  1. JS实现隔行变色，鼠标移入高亮

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

  2. jQuery table tr隔行变色，鼠标移入移出变色，鼠标点击变色

    .trover { background: #f9f9f9; } .trclick { background: #c4e8f5; } .treven{ background:#CCFFCC; } .t ...

  3. jQuery实现table隔行换色和鼠标经过变色

    一.隔行换色 $("tr:odd").css("background-color","#eeeeee"); $("tr:even& ...

  4. JS---案例：表格隔行变色(鼠标划过背景色恢复)

    案例:表格隔行变色(鼠标划过背景色恢复) <!DOCTYPE html> <html> <head lang="en"> <meta ch ...

  5. GridView显示数据鼠标悬停变色

    一. 首先在前台GridView中加上onrowdatabound="GridView1_RowDataBound": <asp:GridView ID="Grid ...

  6. # li鼠标移入移出，点击，变背景色，变checkbox选中状态

    移入移出背景色改变和点击背景色改变,两者是否相互覆盖? 若移出背景色恢复,影响点击事件的背景色改变,会产生效果为: 点击时,背景色改变,并且checkbox选中 鼠标移开后,checkbox仍选中,但 ...

  7. JS添加、设置属性以及鼠标移入移出事件

    源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  8. jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏

    一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...

  9. Jquery事件：鼠标移入移出(mouseenter,mouseleave)

    前几天帮朋友做了一个单页面,其中有个效果就是鼠标移动到头像上变换头像样式,当鼠标移出时恢复头像样式.当时没多想,脑子就蹦出了mouseover,mouseout两个方法. 但是在编写页面的过程中,无论 ...

随机推荐

  1. hibernate事务规范写法

    @Test public void testTx() { SessionFactory sessionFactory = null; Session session = null; Transacti ...

  2. cocos2dx spine之一 ：spine缓存 (c++ & lua)

    cocos2dx版本为3.10 1.在使用spine的过程中,发现了一个比较严重的问题:每次创建SkeletonAnimation的时候都会很卡,即使是使用同一个骨骼数据skeletonData. 跟 ...

  3. C#中的var

    var关键字是C#3.0开始新增的特性,称为推断类型(其实也就是弱化类型的定义). var a =23: 则a是整型,var a = “lgs”:则a是字符型,但使用Var类型要注意: 1.必须在定义 ...

  4. Python3之JSON数据解析实例：新闻头条 --Python3

    一.接口相关 数据服务商:聚合数据(https://www.juhe.cn/) API部分文档: 完整API文档下载:https://files.cnblogs.com/files/qikeyishu ...

  5. C#流(stream)

    http://www.cnblogs.com/liuxinls/archive/2013/02/15/2912968.html 流用于对IO处理 在System.IO名称空间中有以下类 BinaryR ...

  6. hdu-5985 概率DP

    http://acm.hdu.edu.cn/showproblem.php?pid=5985 作为队里负责动态规划的同学,做不出来好无奈啊.思考了一个下午,最好还是参考了别人的思想才写出来,数学啊!! ...

  7. apiCloud 调微信支付，调支付宝支付

    data里面的参数信息,需要从后台接口中调取,点击查看微信支付详情,https://docs.apicloud.com/Client-API/Open-SDK/wxPay 首先,需要在config.x ...

  8. 基于react的记账簿开发

    前言 前端是纯 React,后端通过 axios 库请求服务器获得数据. 源码: https://github.com/hfpp2012/react-accounts-app 项目详解: https: ...

  9. GPLT L2-014 列车调度

    题目链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805063166312448 分析:明显从右到左列车的序号需要依 ...

  10. 堆排序 GPLT L2-012 关于堆的判断

    题目链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805064676261888 分析:这题看起来非常唬人,其实不难 ...