Es allí una manera de añadir un mouseover/mouseout css de cambio de clase para TODOS los botones en una página a través de, por ejemplo, algunos de JavaScript en la cabecera de la página, sin tener que dar a cada botón de su propio onmouseover y onmouseout eventos? Parece muy ineficiente que habría que agregar esto a cada botón en todas mis páginas:

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

Debe haber una manera más fácil de hacer esto!

4 Comentarios

  1. 4

    Dar a sus elementos de una clase y, a continuación, usted va sobre algo como esto:

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

    Sólo se aplica a la clase myclass a sus cuadros de entrada.

    Con jQuery:

    $(function(){
      $('.myclass').hover(function(){
        $(this).removeClass().addClass('ui-state-hover');
      }, function(){
        $(this).removeClass().addClass('ui-state-default');
      });
    });
    • El jQuery bits funciona perfectamente, gracias! Me encanta jQuery 😀 Probablemente debería haber mencionado que yo estoy usando.
    • Sí, definitivamente hablar de cuando estás usando jQuery, así que la gente sabe que está bien para dar jQuery-respuestas específicas. Obtendrás más respuestas, más rápido.
    • Aún podría ser mejor usar live() o delegate() para evitar la unión de un montón de controladores de eventos. @jorrit: Sí, mencionar que antes de que otras personas romper sus dedos al escribir llanura JavaScript 😉 Y aún así usted debería considerar la posibilidad de utilizar CSS en lugar.
  2. 3

    Si usted no necesita el apoyo IE6, hacer uso de 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
    }

    De lo contrario, puede utilizar evento delegación a través de la propagación de los eventos:

    (por W3C navegador compatible)

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

    Edición: Cross-browser compatible y más sofisticados

    Para obtener más información, eche un vistazo a Avanzada de eventos el registro de los modelos de qurirksmode.org y propiedades de Evento – quirksmode.org

    • Creo que te refieres tagName (en lugar de nodeName). Y es posible que desee para apoyar input[type=button] así como button. Y usted puede apoyar es decir con bastante facilidad, a través de attachEvent.
    • debería funcionar así: developer.mozilla.org/en/DOM/element.nodeName. Sí, la prueba dio a ajustarse (pero el OP no está especificando que «botones») y yo era demasiado perezoso para hacerlo compatible con todos los navegadores 😉
    • hola chicos salida: aleembawany.com/2009/02/11/tagname-vs-nodename
    • Justo lo suficiente, me había olvidado que nodeName == tagName cuando el nodo es un Elemento.
  3. 2

    Puede utilizar jQuery para hacer que funcione algo como

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

    El uso de 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');
      });
    
    );

Dejar respuesta

Please enter your comment!
Please enter your name here