位置:海鸟网 > IT > JavaScript >

一起学习javascript(二):改变鼠标经过的div块的背景色

一起学习javascript本节我们学习第二篇,如何改变鼠标经过的div块的背景色,具体方法如下:
HTML部分代码:
<ul> 

 <li>鼠标经过时改变背景色</li> 

 <li>鼠标经过时改变背景色</li> 

   <li>鼠标经过时改变背景色</li> 

    </ul>

部分代码:
当鼠标经过时,给li添加class="current"类,鼠标离开时,去除该类,达到改变背景色的目的!
01 window.onload = function() { 

02         var lis = document.getElementsByTagName("li"); 

03         for (var i=0; i<lis.length; i++) { 

04             lis[i].onmouseover = function() { 

05                 this.setAttribute("class", "current"); 

06             } 

07             lis[i].onmouseout = function() { 

08                 this.setAttribute("class", ""); 

09             } 

10         } 

11 }

css部分代码:
1 ul li.current { 

2     background-color:red; 

3     cursor:pointer; 

4 }