Javascript 将鼠标悬停添加到页面上的所有按钮

是否有一种方法可以通过（例如）页面标题中的一些JavaScript向页面上的所有按钮添加mouseover/mouseout css类更改，而不必为每个按钮提供自己的onmouseover和onmouseout事件？我不得不在我所有页面上的每个按钮上添加以下内容，这似乎是非常低效的：

onmouseover="javascript:this.className='ui-state-hover';" onmouseout="javascript:this.className='ui-state-default';"

---

一定有更简单的方法

给元素一个类，然后进行如下操作：

window.onload = function(){
    var elms = document.getElementsByTagName('input');

    // search for element with class myclass
    for (var i = 0; i < elms.length; i++){
      if (elms[i].getAttribute('class') === 'myclass'){

        elms[i].onmouseover = function(){
          this.className='ui-state-hover'
        }

        elms[i].onmouseout = function(){
          this.className='ui-state-default'
        }

      }
    }
}

，使用CSS

：悬停

：

button, 
input[type=button], 
input[type=reset], 
input[type=submit] {
    // all properties of `ui-state-default` here
}

button:hover,
input[type=button]:hover, 
input[type=reset]:hover, 
input[type=submit]:hover {
    // all properties of `ui-state-hover` here
}

---

否则，您可以通过以下方式使用事件委派：

（适用于W3C兼容浏览器）

编辑：跨浏览器兼容且更复杂

---

有关更多信息，请查看，您可以使用jQuery使其工作如下

$(document).ready(function() {
    $("input:button").mouseover(function() {
         $(this).removeClass('ui-state-default').addClass('ui-state-hover');
    });

    $("input:button").mouseout(function() {
         $(this).removeClass('ui-state-hover').addClass('ui-state-default');
    });
});

使用jQuery

$(document).ready(
  $('button').mouseover(function(){
     $(this).removeClass('ui-state-default').addClass('ui-state-hover');
  });

  $('button').mouseout(function(){
     $(this).removeClass('ui-state-hover').addClass('ui-state-default');
  });

);

---

我想你指的是

标记名

（而不是

节点名

）。您可能希望支持

输入[type=button]

以及

按钮

。您还可以通过

attachEvent

@TJCrowder轻松支持IE:

nodeName

也应该可以使用：。是的，测试可能需要调整（但OP没有指定哪些“按钮”），我只是懒得让它跨浏览器兼容；）公平地说，当节点是一个元素时，我忘记了

nodeName

=

标记名

。jQuery位工作得很好，谢谢！我真的很喜欢jQuery:D可能应该提到我正在使用它。@jorrit:是的，在使用jQuery时一定要提到，这样人们就知道只给你jQuery特定的答案是可以的。您将更快地获得更多答案。最好使用

live（）

或

delegate（）

来避免绑定一堆事件处理程序@乔瑞特：是的，在别人写纯JavaScript时弄断手指之前先提一下；）你仍然应该考虑使用CSS来代替。

$(document).ready(function() {
    $("input:button").mouseover(function() {
         $(this).removeClass('ui-state-default').addClass('ui-state-hover');
    });

    $("input:button").mouseout(function() {
         $(this).removeClass('ui-state-hover').addClass('ui-state-default');
    });
});

$(document).ready(
  $('button').mouseover(function(){
     $(this).removeClass('ui-state-default').addClass('ui-state-hover');
  });

  $('button').mouseout(function(){
     $(this).removeClass('ui-state-hover').addClass('ui-state-default');
  });

);