<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. Servlet模板，一个供新手参考的模板

    由于这学期老师的进度是刚开始教JavaSE部分,而我的进度比较快,所以买了3本javaee的书,我根据自己的基础,选择了合适的开发实践,另外两本书都和框架相关,我自认为我的web基础还不是很牢固,所以 ...

  2. synchronized和volatile

    迄今为止,看到的最清楚的一篇: https://zhuanlan.zhihu.com/p/29866981 volatile https://zhuanlan.zhihu.com/p/34362413

  3. 力扣（LeetCode） 14. 最长公共前缀

    编写一个函数来查找字符串数组中的最长公共前缀. 如果不存在公共前缀,返回空字符串 "". 示例 1: 输入: ["flower","flow" ...

  4. 最大频率栈 Maximum Frequency Stack

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

  5. 20165303 2017-2018-2 《Java程序设计》结对编程练习_四则运算

    需求分析 能生成简单四则运算题目并判断用户回答对错. 能正确统计回答正确的概率. 能正确处理混合四则运算的优先级的问题. 能正确输出负数等结果. 能处理简单的加,减,乘,除运算. 能正确的处理有括号的 ...

  6. spring ----> aop的两种实现方式

    实现1:基于xml package com.rr.spring3.interf; //接口 public interface SayHello { public void sayHello(); } ...

  7. vue,vux判断字符串是否是undefined

    if (typeof thisObj.city === 'undefined') { return}

  8. 4.2 面向对象分析(二) CRC方法标识概念类

    CRC  又称为CRC索引卡片:CRC card  每张卡片代表一个类 Each card represents one class  每张卡片上写出这个类承担的职责.与其合作交互的其他类名   ...

  9. redis之数据类型以及使用

    1 redis数据类型 1. string类型: 字符串类型是 Redis 中最为基础的数据存储类型,它在 Redis 中是二进制安全的,也就是byte类型 最大容量是512M.2. hash类型: ...

  10. Bipartite Segments CodeForces - 901C (区间二分图计数)

    大意: 给定无向图, 无偶环, 每次询问求[l,r]区间内, 有多少子区间是二分图. 无偶环等价于奇环仙人掌森林, 可以直接tarjan求出所有环, 然后就可以预处理出每个点为右端点时的答案. 这样的 ...