如何对页面中样式为aaa的所有Button滑入滑出设置不同的样式?

如何对页面中样式为aaa的所有Button滑入滑出设置不同的样式?针对页面中样式为aaa的所有的Button，默认时class为aaa，鼠标滑过时class为bbb，滑出时class还原为aaa。

解决方案 »

  1.   

    onclick事件：
    onmousedown 
    onmousewheel 
    onmousemove 
    onmouseout 
    onmouseover 
    onmouseup 
      

  2.   

    首先，你得到所有的button对象。然后，过滤出className为aaa的，为它加上事件,onmouseover、还有onmouseout就可以了。
      

  3.   

    onMouseDown 鼠标上的按钮被按下了 
    onMouseUp  鼠标按下后，松开时激发的事件 
    onMouseOver  当鼠标移动到某对象范围的上方时触发的事件 
    onMouseMove  鼠标移动时触发的事件 
    onMouseOut 当鼠标离开某对象范围时触发的事件 
      

  4.   

    引入  jquery$('.aaa').each(function(){
       $(this).mouseover(function(){
           $(this).addClass('bbb').removeClass('aaa');
       }).mouseout(function(){
           $(this).addClass('aaa').removeClass('bbb');
       })})
    原生态JSvar btn = document.getElementsByTagName('input');
    for(var i=0;i<btn.length;i++){
       if( btn[i].className == 'aaa'){
            btn[i].onmouseover = function(){
                this.className == 'bbb' ;
            };
            btn[i].onmouseoout = function(){
                this.className == 'aaa' ;
            };
       }
    }
      

  5.   

    jquery新手问：
    <!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" />
    <title>无标题文档</title>
    <style>
    .aaa{
    background:#00FF33;
    }
    .bbb{
    background:#CC3399;
    }
    </style>
    </head><body>
    <script language="javascript" src="jquery-1.4.min.js"></script>
    <script language="javascript">
    $(function(){
    $("input[type=button]").mouseover(function(){addClass("bbb").removeClass("aaa");});
    $("input[type=button]").mouseout(function(){addClass("aaa").removeClass("bbb");});
    });
    </script>
    <input type="button" class="aaa"/>
    <input type="button" class="aaa"/>
    <input type="button" class="aaa"/>
    </body></html>
    为什么我在调试的时候显示  addClass is not defined ？
      

  6.   

    vnetcbd、youyo1122：
    我不想用jquery，用了vnetcbd的原生态JS，还是不行，想麻烦各位帮我修改一下代码。以下地址有我做的源文件rar，请帮忙修改一下！
    http://bbs.hxsd.com/showthread.php?p=12722261#post12722261
      

  7.   


    $("input[type=button]").mouseover(function(){$(this).addClass("bbb").removeClass("aaa");});
    $("input[type=button]").mouseout(function(){$(this).addClass("aaa").removeClass("bbb");});
      

  8.   


    不好意思 上面的==应该是 =下面的OK了，我测试过了
    <div id="btnall"><input name="" type="button" class="aaa" /><input name="" type="button" class="aaa" /><input name="" type="button" class="bbb" /></div>
    <script>
    var btn = document.getElementById('btnall').getElementsByTagName('input');
    for(var i=0;i<btn.length;i++){
      if( btn[i].className == 'aaa'){
      btn[i].onmouseover = function(){
       this.className = 'bbb' ;
      };
      btn[i].onmouseout = function(){
       this.className = 'aaa' ;
      };
      }
    }
    </script>
      

  9.   

    按照vnetcbd的做法写好代码了，但是不知道为什么js代码必须放在html的input标签代码的下面才有效？
      

  10.   

    放在前面的话，<input>还没加载，js无法获取
      

  11.   

      用onmouseover鼠标移入事件设置为aaa  onmouseout鼠标移出事件设为bbb就ok了
      

  12.   

      LZ看看这个用JS做的<html>
    <head>
    <style type = text/css>
    .onmouseout{

    border-color:blue;
    }
    </style>
    <script language = "javascript" type = "text/javascript">
     var name = document.getElementsByName("button");//获得页面所有名为Button的元素
    function yang(){ for(i=0;i<name.length;i++){
    name[i].style.borderColor = 'red';//改变边框颜色
    }
    }
    function fa(){ for(i=0;i<name.length;i++){
    name[i].style.borderColor = 'blue';
    }
    }
    </script>
    </head>
    <body>
    <div>
    <input type = "button" name = "button" value = "点击这个" class = "onmouseout" onMouseOver = "yang()" onmouseout = "fa()">
    <input type = "button" name = "button" value = "2222222" class = "onmouseout">

    </div>
    </body>
    </html>