javascript 将鼠标悬停在页面上的所有按钮上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5050444/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add mouseover to all buttons on a page
提问by voodoo-burger
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:
有没有办法通过例如页面标题中的一些 JavaScript 向页面上的所有按钮添加 mouseover/mouseout css 类更改，而不必为每个单独的按钮提供自己的 onmouseover 和 onmouseout 事件？我必须将它添加到我所有页面上的每个按钮中，这似乎非常低效：
onmouseover="javascript:this.className='ui-state-hover';" onmouseout="javascript:this.className='ui-state-default';"
There must be an easier way to do this!
必须有一种更简单的方法来做到这一点！
回答by Sarfraz
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 myclassto your input boxes.
只需将该类应用myclass到您的输入框即可。
With jQuery:
使用 jQuery：
$(function(){
$('.myclass').hover(function(){
$(this).removeClass().addClass('ui-state-hover');
}, function(){
$(this).removeClass().addClass('ui-state-default');
});
});
回答by Felix Kling
If you don't need to support IE6, make use of CSS :hover:
如果您不需要支持 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
}
Otherwise, you can use event delegationthrough event bubbling:
否则，您可以通过事件冒泡来使用事件委托：
(for W3C compatible browser)
（适用于 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);
}
Edit: Cross-browser compatible and more sophisticated
编辑：跨浏览器兼容且更复杂
For more information, have a look at Advanced event registration models - qurirksmode.organd Event properties - quirksmode.org
回答by Jith
You can use jQuery to make it work something like
你可以使用 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');
});
});
回答by Zimbabao
Use jQuery.
使用 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');
});
);
