<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. strpos检测字符串是否包含元素

    <?php echo strpos('https://www.baidu.com','https',0); ?> 默认的第三个参数就是0. 第三个参数表示查找的起始位置. 如果不存在的话, ...

  2. Uncaught TypeError: (intermediate value)(...) is not a function 上一个方法结束没有加分号; 代码解析报错

    Uncaught TypeError: (intermediate value)(...) is not a function 别忽略了,  第一个方法后面的结束 分号; 不起眼的,引来麻烦, 哎,规 ...

  3. mint19 源码安装python3.7

    基于Ubuntu 18.04  自带了3.6,可惜 3.7秒出. 一个原则是: 自带的3.6不要动 防止用apt install python3-XXX时版本不对. 理由: 自带的2.7和3.6都是让 ...

  4. 牛客OI周赛6-提高组 A 大法师与魔法石

    大法师与魔法石 思路: 对于一个ai, 它可以构成区间[ai/v, ai] 假设和它相邻的为aj, 那么ai 和 aj 构成的区间为[(ai+aj) / v, ai+aj] 那么这两个区间能合并的条件 ...

  5. Python pip 常用命令

    使用了这么就pip命令,但是一直是简单使用,很多命令都是用了查,查了用,今天把常用的命令汇总一下,方便使用. 命令: pip 由上图可以看到 pip 支持一下命令 Commands: install ...

  6. Java Spring JDBC访问数据库

    一.首先采用org.springframework.jdbc.datasource.DriverManagerDataSource类进行实现 1.applicationContext.xml配置如下: ...

  7. （转）基于C#的socket编程的TCP异步实现

    一.摘要 本篇博文阐述基于TCP通信协议的异步实现. 二.实验平台 Visual Studio 2010 三.异步通信实现原理及常用方法 3.1 建立连接 在同步模式中,在服务器上使用Accept方法 ...

  8. idea javamaven项目 连接sqlserver 数据库方法

    这里用的是c3p0连接数据库 1.pom文件写法: <!-- 数据库连接池 --> <dependency> <groupId>com.mchange</gr ...

  9. MySQL中如何实现select top n ----Limit

    Mysql中limit的用法详解 在我们使用查询语句的时候,经常要返回前几条或者中间某几行数据,这个时候怎么办呢?不用担心,mysql已经为我们提供了这样一个功能. LIMIT 子句可以被用于强制 S ...

  10. java maven项目 pom.xml plugin 报错， build path 找不到 jconsole-1.8.0.jar 和 tools-1.8.0.jar 包

    maven项目pom.xml突然报错,在Java Build Path 中并没有引用的jar包出现在了Maven Dependencies的依赖包中. 这个错误直接导致了pom.xml文件中 < ...