javascript学习笔记(二) 鼠标经过时,改变div块的背景色的代码

  HTML部分代码:

  

复制代码 代码如下:

  <ul>

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

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

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

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

  </ul>

  javascript部分代码:

  当鼠标经过时,给li添加class="current"类,鼠标离开时,去除该类,达到改变背景色的目的

  

复制代码 代码如下:

  window.onload = function() {

  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部分代码:

  

复制代码 代码如下:

  ul li.current {

  background-color:red;

  cursor:pointer;

  }

  上面的代码,主要是方便大家更多的认识js,下面提供一个css实现的版本。

  

   [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]