<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. 利用vue-cli3快速搭建vue项目详细过程

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...

  2. Linux性能测试工具-UnixBench

    ■下载路径: unixbench-5.1.2.tar.gz :http://soft.vpser.net/test/unixbench/ unixbench-5.1.3.tar.gz :http:// ...

  3. 《UnityShader入门精要》学习笔记之渲染流水线

    第一种分类方式: 图形管道(如下7步): 顶点数据 : 由3D模型传递的三角形网格 顶点着色 : 编写CG程序对各个顶点进行着色 生成几何图元 : 连接特定的顶点生成几何图元,例如连接三个顶点生成一个 ...

  4. python+selenium基础之XPATH定位(第一篇)

    世界上最远的距离大概就是明明看到一个页面元素矗在那里,但是我却定位不到!! selenium定位元素的方法有很多种,像是通过id.name.class_name.tag_name.link_text等 ...

  5. java学习视频

    随着信息化的发展,IT行业变得越来火,在开发领域,Java语言在是市面上很受欢迎的编程语言,很多初学者不知道从何学起,为了找资源浪费大量时间,而我就将自己的寻找资源分享给大家,让大家能够更加便捷的学习 ...

  6. Spring Boot之实现自动配置

    GITHUB地址:https://github.com/zhangboqing/springboot-learning 一.Spring Boot自动配置原理 自动配置功能是由@SpringBootA ...

  7. 0.11内核rd_load@ramdisk.c中memcpy函数好像有bug

    0.11内核rd_load@ramdisk.c中memcpy函数好像有bug,如:#define memcpy(dst,src,n) \    __asm__("cld;rep;movsl& ...

  8. laravel安装Excel安装不上

    1.生明版本号 composer require maatwebsite/excel 2.1我的PHP是7.0安装Excel得2.1 2.在composer.json中加入 "maatweb ...

  9. 原生JS实现瀑布流布局

    瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 1.首先瀑布流所有的图片应该保持宽度一致,高 ...

  10. python面向对象之 类

    内容梗概: 1. 类的成员 2. 类的成员-变量 3. 类的成员-方法 4. 类的成员-属性 5. 私有 1.类的成员class 类名: 方法 def __init__(self, 参数1, 参数2. ...