<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. The origin server did not find a current representation for the target resource or is not willing to disclose that one exists.

    关于出现这个·问题的原因貌似也是多种多样的? 在stack overflow上的帖子如下:https://stackoverflow.com/questions/43186315/tomcat-404 ...

  2. JS异步函数 返回值

    1.  js 异步的几种情况 : 1.1 异步操作由浏览器内核的 webcore 来执行: onclick 由浏览器内核的 DOM Binding 模块来处理,当事件触发的时候,回调函数会立即添加到任 ...

  3. 学习笔记44—Linux下安装freesurfer

    第一步:安装ubuntu (略过) 第二步:下载freesurfer:从freesurfer的官方网站上下载:http://surfer.nmr.mgh.harvard.edu/fswiki/Down ...

  4. Spring的AOP配置文件和注解实例解析

    1.1           Spring的AOP配置文件和注解实例解析 AOP它利用一种称为"横切"的技术,将那些与核心业务无关,却为业务模块所共同调用的逻辑或责任封装起来,便于减 ...

  5. PSFTP用法

    PSFTP是PuTTY SFTP客户端,用于本地与服务器间安全传输文件(使用SSH连接). 1. 启动PSFTP 在Windows命令提示符中输入 set PATH=C:/PSFTP.exe所在路径; ...

  6. python--calc计算器的小程序

    x写一个计算器的小程序,正在筹备中......钱不够,演员未定,剧本暂无,请稍等

  7. python 断言大全

    参考链接:https://blog.csdn.net/qq1124794084/article/details/51668672 1. 小数位模糊等于 自动化脚本最重要的是断言,正确设置断言以后才能帮 ...

  8. genome repeat sequence | 基因组重复序列

    基因组里的小写字母的序列就是soft masking,也就是被标记的重复序列. 怎么把重复序列提取出来,保存为bed文件? 参考:Uppercase vs lowercase letters in r ...

  9. Python操作MySql --Python3

    Python版本:v3.7 模块:pymysql 1.连接数据库 connectDB.py: # coding:utf-8import pymysql host = 'localhost' # 主机u ...

  10. 基于AngularJS的Onsen UI --Onsen UI学习笔记

    AngularJS与Onsen UI的结合,Onsen UI应用程序实际上是一个AngularJS 1应用程序. <!doctype html><html lang="en ...