隔行变色&&鼠标移入变色
<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>
隔行变色&&鼠标移入变色的更多相关文章
- JS实现隔行变色,鼠标移入高亮
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...
- jQuery table tr隔行变色,鼠标移入移出变色,鼠标点击变色
.trover { background: #f9f9f9; } .trclick { background: #c4e8f5; } .treven{ background:#CCFFCC; } .t ...
- jQuery实现table隔行换色和鼠标经过变色
一.隔行换色 $("tr:odd").css("background-color","#eeeeee"); $("tr:even& ...
- JS---案例:表格隔行变色(鼠标划过背景色恢复)
案例:表格隔行变色(鼠标划过背景色恢复) <!DOCTYPE html> <html> <head lang="en"> <meta ch ...
- GridView显示数据鼠标悬停变色
一. 首先在前台GridView中加上onrowdatabound="GridView1_RowDataBound": <asp:GridView ID="Grid ...
- # li鼠标移入移出,点击,变背景色,变checkbox选中状态
移入移出背景色改变和点击背景色改变,两者是否相互覆盖? 若移出背景色恢复,影响点击事件的背景色改变,会产生效果为: 点击时,背景色改变,并且checkbox选中 鼠标移开后,checkbox仍选中,但 ...
- JS添加、设置属性以及鼠标移入移出事件
源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏
一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...
- Jquery事件:鼠标移入移出(mouseenter,mouseleave)
前几天帮朋友做了一个单页面,其中有个效果就是鼠标移动到头像上变换头像样式,当鼠标移出时恢复头像样式.当时没多想,脑子就蹦出了mouseover,mouseout两个方法. 但是在编写页面的过程中,无论 ...
随机推荐
- 《剑指offer》第六十四题(求1+2+…+n)
// 面试题64:求1+2+…+n // 题目:求1+2+…+n,要求不能使用乘除法.for.while.if.else.switch.case // 等关键字及条件判断语句(A?B:C). #inc ...
- 虹软人脸识别 arcface2.0 安卓版本
虹软官方网站提供了 AndroidStudio 版本的arcface2.0,我花了 几天的时间整理了一个 ADT版本的源码, 是自己从 官方 2.0 android版本中转换而来的.已经测试了,可 ...
- 分析:java.lang.OutOfMemoryError: Java heap space
Exception in thread "main" java.lang.OutOfMemoryError: Java heap space at java.util.Hashta ...
- 牛客OI周赛4-提高组 A K小生成树(kmst)
K小生成树(kmst) 思路: 暴力+并查集 枚举边的子集,用并查集判断两个点联不联通 代码: #include<bits/stdc++.h> using namespace std; # ...
- Python Scrapy 爬取煎蛋网妹子图实例(二)
上篇已经介绍了 图片的爬取,后来觉得不太好,每次爬取的图片 都在一个文件下,不方便区分,且数据库中没有爬取的时间标识,不方便后续查看 数据时何时爬取的,所以这里进行了局部修改 修改一:修改爬虫执行方式 ...
- MyBatis配置文件中的常用配置
一.连接数据库的配置单独放在一个properties文件中 之前,我们是直接将数据库的连接配置信息写在了MyBatis的conf.xml文件中,如下: <?xml version="1 ...
- Superclass和Constructor Chaining
A subclass inherits accessible date fields and methods from its superclass. Does it inherit construc ...
- spring ----> 搭建spring+springmvc+mybatis出现的几个问题
环境: idea ce 2018.1+maven3.5.3+mysql8.0.11+jdk1.8 spring4.3.7+spring mvc4.3.7+mybatis3.4.1+tomcat7.0. ...
- Python的特殊成员
Python 用下划线作为变量前缀和后缀指定特殊变量 _xxx 不能用’from module import *’导入 __xxx__ 系统定义名字 __xxx 类中的私有变量名 核心风格:避免用下划 ...
- pandas更换index,column名称
1)仅换掉index名称 df.index = list 2)调整index时,后面的项目也要跟着调整: df.reindex(list) 注意如果list中出现了df中没有的index,后面的项目会 ...