javascript - Add mouseover to all buttons on a page -

is there way add mouseover/mouseout css class change buttons on page through, example, javascript in page header, without having give each individual button own onmouseover , onmouseout events? seems inefficient have add every single button on of pages:

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

there must easier way this!

give elements class , go this:

window.onload = function(){     var elms = document.getelementsbytagname('input');      // search element class myclass     (var = 0; < 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'         }        }     } } 

just apply class myclass input boxes.

with jquery:

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