鼠标over和out对于事件改变div class属性的问题

想了好久不知道发到哪个版
把代码贴出来
<!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=utf-8" />
<style type="text/css">
.s1{visibility:hidden;}
.s2{visibility:visible;}
</style>
<title>鼠标over和out判断</title>
</head><body>
<script language="javascript">
function change(a){
var div = a.id;
document.getElementById(div).className="s1";}
function toback(a){
document.getElementById(div).className="s2"; 
}
</script>
<?php
$num1 = 5;for($i=0;$i<$num1;$i++){$i2=$i+1;echo '<div id="show" class="s2" onmouseover="change(this);" onmouseout="toback(this);"><b>'.$i2.'</b></div>';
}
?>
</body>
</html>想鼠标在数字上数字消失，离开数字就出现，不过实现不了，求解决

解决方案 »

  1.   

    change(this)和toback(this)已经把DOM对象传递过去了，就不需要再document.getElementById，方法简化成：
    function change(a){
        a.className="s1";
    }
    function toback(a){
        a.className="s2"; 
    }
      

  2.   

    function toback(a){
    var div = a.id;
    document.getElementById(div).className="s2"; 
    }
      

  3.   

    <!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=utf-8" />
    <style type="text/css">
    #show{ width:200px;height:200px;background-color:Red; }
    .s1{visibility:hidden;}
    .s2{visibility:visible;}
    </style>
    <title>鼠标over和out判断</title>
    </head>
    <body>
    <script type="text/javascript">
        function change(obj,type) {
            obj.className =type=="hide"?"s1":"s2";
        }
    </script>
    <div id="show" class="s2" onmouseover="change(this,'hide');" onmouseout="change(this,'show');">DIV</div>
    </body>
    </html>
      

  4.   

    先不说你传没传参数。。
    document.getElementById(div).className="s2";  
    自己看看你的写法对吗？！
      

  5.   

    不好意思我加参数了，改完这样
    <script language="javascript">
    function change(a){
    //var div = a.id;
    a.className="s1";}
    function toback(a){
    //var div = a.id;
    a.className="s2"; 
    }
    </script>
    结果是只要鼠标在一个数字上时，这个数字不是消失，而是闪烁，出现和消失不停的交替，这是怎么回事?
    如果用
    function change(a){
    var div = a.id;
    document.getElementById(div).className="s1";}
    function toback(a){
    var div = a.id;
    document.getElementById(div).className="s2"; 
    }无论鼠标在哪个数字上，消失的都是数字1其它没有，反应，高手帮看下
      

  6.   


    <script language="javascript">
    function change(a){
      if(a){
        var div = a.id;
        a.className="s1";
      }else{
        a.className="";
      }
    }
    function toback(a){
      if(a){
        var div = a.id;
        a.className="s2"; 
      }else{
        a.className="";
      }
    }
    </script>