<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
div{
width:300px;
height:300px;
margin:100px auto;
}
div ul li span{
margin:5px;
}
/*底色是蓝色的情况*/
.current{
background-color: blue !important;
}
</style>
<script>
// js部分，1，偶数行的底色都变成绿色；2，当鼠标经过偶数行的时候，该行的底色变成current代表的蓝色
window.onload=function() {
var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++)
{
if(i%2==0)
{
// lis[i].style.backgroundColor="green"; //偶数行li的底色都变成绿色,错误的写法是：lis.style.color="green";
//当鼠标经过偶数行的时候，li的底色会变成蓝色
lis[i].onmouseover=function(){
this.className="current"; //用this不是用lis[i],因为是当前鼠标经过的这一行颜色变成蓝色,另外注意这种表达
}
}
else{
lis[i].onmouseover=function()
{
this.className=""; //不是经过偶数行，颜色不改变，className等于空
}
}
}
}
</script>
</head>
<body>
<!--一个盒子，里面装着句话，在7行-->
<div>
<ul>
<li>
<span>我是第一行</span>
<span>谢谢主席</span>
</li>
<li>
<span>我是第二行</span>
<span>谢谢主席</span>
</li>
<li>
<span>我是第三行</span>
<span>谢谢主席</span>
</li>
<li>
<span>我是第四行</span>
<span>谢谢主席</span>
</li>
<li>
<span>我是第五行</span>
<span>谢谢主席</span>
</li>
<li>
<span>我是第六行</span>
<span>谢谢主席</span>
</li>
<li>
<span>我是第七行</span>
<span>谢谢主席</span>
</li>
</ul>
</div>
</body>
</html>
浙公网安备 33010602011771号