鼠标滑过背景变色的一个效果修改

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
#holder li.current{
background-color:#000000
}  
#holder li {
padding: 14px 16px;
float: left;
}
</style>
</head>
<body>
<div id="holder">
    <ul><li>aaa</li></ul>
    <ul><li>aaa</li></ul>
</div>  <script type="text/javascript">  
var holder = document.getElementById("holder");  
var td = holder.getElementsByTagName("li");  
for(var i = 0; i < td.length; i++){  
    var obj = td[i];  
    obj.onmouseover = function(){this.className = "current";};  
    obj.onmouseout = function(){this.className = "";};  
}  
</script>  </body>
</html>
上面这段代码是一个鼠标滑过背景变色的效果，但是只能用id控制（id="holder"），能不能修改为class的，因为页面好多地方要用同一个效果我菜鸟，求详细方法

解决方案 »

  1.   

    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style>
    .holder li.current{
    background-color:#000000
    }  
    .holder li {
    padding: 14px 16px;
    float: left;
    }
    </style>
    </head>
    <body>
    <div  class="holder">
      <ul><li>aaa</li></ul>
      <ul><li>aaa</li></ul>
    </div>  <script type="text/javascript">  
    var holder = document.getElementsByClassName("holder")[0];  
    var td = holder.getElementsByTagName("li");  
    for(var i = 0; i < td.length; i++){  
      var obj = td[i];  
      obj.onmouseover = function(){this.className = "current";};  
      obj.onmouseout = function(){this.className = "";};  
    }  
    </script>  </body>
    </html>
      

  2.   

    好像还是不行啊看这段代码
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style>
    .holder li.current{
    background-color:#000000
    }   
    .holder li {
    padding: 14px 16px;
    float: left;
    }
    </style>
    </head>
    <body>
    <div class="holder">
      <ul><li>aaa</li></ul>
      <ul><li>aaa</li></ul>
    </div><div class="holder">
      <ul><li>bbb</li></ul>
      <ul><li>bbb</li></ul>
    </div>
      <script type="text/javascript">   
    var holder = document.getElementsByClassName("holder")[0];   
    var td = holder.getElementsByTagName("li");   
    for(var i = 0; i < td.length; i++){   
      var obj = td[i];   
      obj.onmouseover = function(){this.className = "current";};   
      obj.onmouseout = function(){this.className = "";};   
    }   
    </script>   </body>
    </html>后面那个不起作用