Question

有没有办法将鼠标悬停/ mouseout css类更改添加到页面上的所有按钮，例如，页眉中的某些JavaScript，而不必为每个单独的按钮分配自己的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');
  });
});

Answer 2

If you don't need to support IE6，使用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
}

否则，您可以通过event bubbling使用事件委派：

~~（适用于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);
}

编辑：跨浏览器兼容且更复杂

有关详细信息，请查看Advanced event registration models - qurirksmode.org和Event properties - quirksmode.org

Answer 3

您可以使用jQuery使其工作类似


$(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

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

);

将鼠标悬停添加到页面上的所有按钮

4 个答案: