<!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>这是一个鼠标滑过背景变换的效果,现在后面那个不起作用,页面上很多地方都要用同样的效果,谁能帮忙修改一下啊
早上发的一帖,有人帮我把id改成现在这样class的,但是不行,只能对第一个起作用http://topic.csdn.net/u/20120824/11/3d14af22-343c-43d5-b8e4-c2653bc3d68f.html?11245

解决方案 »

  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">
    <!-- 
    author:  yanzhen
    date:    2012-8-24
    content: change the background color when mouse move on it
    -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>test</title>
    <!-- css style -->
    <style type="text/css">
    ul li:hover
    {
    background-color:red;
    cursor:pointer;
    }
    </style>
    <!-- javascript code-->
    <script type="text/javascript">   
    window.onload = function() { 
    var lis = document.getElementsByTagName("li"); 
    for (var i=0; i<lis.length; i++) { 
    lis[i].onmouseover = function() { 
    this.setAttribute("class", "hover"); 

    lis[i].onmouseout = function() { 
    this.setAttribute("class", ""); 



    </script>   
    </head>
    <body>
    <div>
      <ul>
    <li>bbb</li>
    <li>bbb</li>
    <li>bbb</li>
    <li>bbb</li>
      </ul>
    </div>
    </body>
    </html>
    那个current好像不管用,不知道楼主怎么做成功的.
      

  2.   

    var holder = document.getElementsByClassName("holder")[0];   getElementsByClassName 在哪定义的?不知道有:
    document.getElementById
      

  3.   

    var holder = document.getElementsByClassName("holder")[0];   
      

  4.   

    IE8-不支持getElementsByClassName,少用这个,建议改为getElementsByTagName,然后遍历对象找到class为holder对象      var holder = document.getElementsByTagName('div');
          for (var k = 0; k < holder.length; k++) {
              if (holder[k].className != 'holder') continue;
              var td = holder[k].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 = ""; };
              }
          }
      

  5.   


    var holder = document.getElementsByTagName("div");
            for (var j = 0; j < holder.length; j++) {
                var className = holder.item(j).getAttribute("class");
                if (className == "holder") {
                    var td = holder.item(j).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 = ""; };
                    } 
                }
            }