Question

Is there a way to add a mouseover/mouseout css class change to ALL buttons on a page through, for example, some JavaScript in the page header, without having to give each individual button its own onmouseover and onmouseout events? It seems very inefficient that I would have to add this to every single button on all of my pages:

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

There must be an easier way to do this!

Answer 1

Give your elements a class and then you go about something like this:

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

      }
    }
}

Just apply the class myclass to your input boxes.

With jQuery:

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