javascript学习笔记二：鼠标经过改变div背景色

首先看完整示例：

        

　　html部分代码：

<div class="container">
 <ul>
  <li>鼠标经过时改变背景色</li>
  <li>鼠标经过时改变背景色</li>
  <li>鼠标经过时改变背景色</li>
  <li>鼠标经过时改变背景色</li>
 </ul>
</div>

　　javascript部分代码：当鼠标经过时，给li添加class="current"类，鼠标离开时，去除该类，达到改变背景色的目的！

window.onload = function() {
 var user_name = document.getElementById("user_name");
 changeBgc();
}
function changeBgc() {
 var lis = document.getElementsByTagName("li");
 for (var i=0; i<lis.length; i++) {
  lis[i].onmouseover = function() {
   this.setAttribute("class", "current");
  }
  lis[i].onmouseout = function() {
   this.setAttribute("class", "");
  }
 }
}

　　css部分代码：

* {
 padding:0px;
 margin:0px;
}
.container {
 width:960px;
 margin:20px auto;
}
ul li {
 padding:5px 0;
 background-color:blue;
 margin:8px 0;
 color:#FFFFFF;
}
ul li.current {
 background-color:red;
 cursor:pointer;
}