<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. ts问题处理(2): 'Promise' only refers to a type, but is being used as a value here.

    error TS2585: 'Promise' only refers to a type, but is being used as a value here. Do you need to cha ...

  2. yum的配置文件介绍

    yum 的配置文件分为两部分:main 和repository   main 部分定义了全局配置选项,整个yum 配置文件应该只有一个main.常位于/etc/yum.conf 中. reposito ...

  3. 最大频率栈 Maximum Frequency Stack

    2018-10-06 22:01:11 问题描述: 问题求解: 为每个频率创建一个栈即可. class FreqStack { Map<Integer, Integer> map; Lis ...

  4. Java用FutureTask实现又返回值的线程

    要实现有返回值的多线程,具体代码如下: package thread; import java.util.concurrent.Callable; import java.util.concurren ...

  5. Axure 元件焦点的控制

    讲解如何控制光标的位置,主要学习了以下三种场景: 1.点击邮箱或者密码时,光标分别自动定位到email.password的文本框处: 2.还有将密码对应的文本框的内容设置为密码的格式(····) 3. ...

  6. C# 连接PDA扫码枪

    Symbol扫码枪开发文档 一.主要功能 实现symbol扫码枪和PC数据交互. 二.运行环境 SymbolMC32NO 三.开发工具与软件 开发环境:Win7 开发语言:C# 数据库:Sql Ser ...

  7. Ubuntu16.04安装8821CE 无线网卡无驱动

    已解决 参考链接:https://unix.stackexchange.com/question ... -mint-18-2 内容 Worked solution (Requirements: ke ...

  8. mat 使用 分析 oom 使用 Eclipse Memory Analyzer 进行堆转储文件分析

    概述 对于大型 JAVA 应用程序来说,再精细的测试也难以堵住所有的漏洞,即便我们在测试阶段进行了大量卓有成效的工作,很多问题还是会在生产环境下暴露出来,并且很难在测试环境中进行重现.JVM 能够记录 ...

  9. genymotio安装apk包提示 ...abi ...cpu

    下载 Genymotion-ARM-Translation_v1.1 (1).zip 地址:http://qc1.androidfilehost.com/dl/Q-YDDKt4QaFNvKh62ppO ...

  10. js中去掉字符串的空格、回车换行

    //例如下面这个json串,中间的\n表示换行 var str = "{' retmsg':'success ',\n' trans_date':' 20170906'}"; co ...