演示一个简单的小功能，效果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.box{
width: 300px;
}
li{
line-height: 30px;
list-style: none;
}
li span{
margin: 5px;
}
.current{
background-color: #aaa!important;
}
</style>
<script>
window.onload=function(){
var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
if(i%2==0){
lis[i].style.background="#ADFF2F";
}
else{
lis[i].style.background="#DB7093";
}
lis[i].onmousemove = function(){
this.className = "current";
}
lis[i].onmouseout = function(){
this.className = '';
}
}
}
</script>
</head>
<body>
<div class="box">
<ul>
<li><span>数据库</span><span>3641</span><span>10-5</span><span>0.16%</span></li>
<li><span>数据库</span><span>3641</span><span>10-5</span><span>0.16%</span></li>
<li><span>数据库</span><span>3641</span><span>10-5</span><span>0.16%</span></li>
<li><span>数据库</span><span>3641</span><span>10-5</span><span>0.16%</span></li>
<li><span>数据库</span><span>3641</span><span>10-5</span><span>0.16%</span></li>
<li><span>数据库</span><span>3641</span><span>10-5</span><span>0.16%</span></li>
<li><span>数据库</span><span>3641</span><span>10-5</span><span>0.16%</span></li>
<li><span>数据库</span><span>3641</span><span>10-5</span><span>0.16%</span></li>
<li><span>数据库</span><span>3641</span><span>10-5</span><span>0.16%</span></li>
<li><span>数据库</span><span>3641</span><span>10-5</span><span>0.16%</span></li>
</ul>
</div>
</body>
</html>