将鼠标悬停在页面上的所有按钮上

Question

有没有办法通过例如页面标题中的一些 JavaScript 向页面上的所有按钮添加 mouseover/mouseout css 类更改，而不必为每个单独的按钮提供自己的 onmouseover 和 onmouseout 事件？我必须将它添加到我所有页面上的每个按钮中，这似乎非常低效：

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

必须有一种更简单的方法来做到这一点！

Answer 1

给你的元素一个类，然后你做这样的事情：

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'
        }

      }
    }
}

只需将该类应用myclass到您的输入框即可。

使用 jQuery：

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