Add mouse cursor to all buttons on the page

Question

Is there a way to add a CSS class change in mouseover / mouseout to all buttons on the page through, for example, some JavaScript in the page title, without having to give each separate button its own onmouseover and onmouseout events? It seems very inefficient that I would have to add this to every single button on all 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 will start 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 myclassto the input fields.

With jQuery:

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

Answer 2

If you don't need to support IE6 , use CSS :hover:

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)

function getHandler(cls) {
    var types = {'submit': true, 'reset': true, 'button': true};
    return function(event) {
        event = event || window.event;
        target = event.target || event.srcElement;
        if(target.nodeName === "BUTTON"
           || (target.nodeName === "INPUT" && target.type in types)) {
            event.target.className = cls;
        }
    }
}

if(window.attachEvent) {
    window.attachEvent('onmouseover', getHandler('ui-state-hover'));
    window.attachEvent('onmouseout', getHandler('ui-state-default'));
}
else {
    window.addEventListener('mouseover', getHandler('ui-state-hover'), false);
    window.addEventListener('mouseout', getHandler('ui-state-default'), false);
}

:

. - qurirksmode.org - quirksmode.org

Answer 3

You can use jQuery to make it work something like

$(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');
    });
});

Answer 4

Use 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');
  });

);