CSS 如何在鼠标悬停、单击时设置“提交”输入的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5760929/
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
How to style "submit" inputs on mouseover, click?
提问by daysrunaway
I need to style two different inputs to appear differently on mouseover and on click, much like buttons. Ordinarily I would use buttons; however, one of these is an input type="reset" and I assume it is simpler to use an input for this than write a form reset script. How does one style inputs with the types "submit" and "reset" with CSS for mouseover and click?
我需要为两个不同的输入设置样式，使其在鼠标悬停和点击时显示不同，就像按钮一样。通常我会使用按钮；但是，其中之一是 input type="reset"，我认为为此使用输入比编写表单重置脚本更简单。一种样式如何使用 CSS 输入“提交”和“重置”类型以进行鼠标悬停和单击？
回答by David says reinstate Monica
Assuming that you mean in CSS, rather than a JavaScript approach, you can use pseudo-classes:
假设你的意思是在 CSS 中，而不是 JavaScript 方法，你可以使用伪类：
input[type=reset], /* CSS2.1 attribute-equals selector */
#resetButtonID,
.resetButtonClass-Name {
/* the reset button */
}
input[type=reset]:hover,
#resetButtonID:hover,
.resetButtonClass-Name:hover {
/* the reset button when hovered over */
}
input[type=reset]:active,
#resetButtonID:active,
.resetButtonClass-Name:active {
/* the reset button when mouse-down */
}
input[type=reset]:focus,
#resetButtonID:focus,
.resetButtonClass-Name:focus {
/* the reset button when focussed by keyboard-navigation */
}
回答by Wesley Murch
It's the same as any other element in CSS, there are psuedo selectors for hover and focus, but not specifically for click. You can also use the attribute selector:
它与 CSS 中的任何其他元素相同，有用于悬停和焦点的伪选择器，但不是专门用于单击的。您还可以使用属性选择器：
input[type="reset"]{/* attribute selector*/}
input[type="reset"]:hover{/* :hover psuedo selector*/}
input[type="reset"]:focus{/* :focus psuedo selector*/}
input[type="reset"]:active{/* :active psuedo selector (for click)*/}
The focus style will be applied when the user initially click (or focuses of course), but will lose the style once the user moves focus to another element. To specifically get click styles for that small moment while the mouse button is down, use javascriptor try the :activeselector, which (I just now realized) can be applied to non-anchor elements.
焦点样式将在用户最初单击（或当然是焦点）时应用，但一旦用户将焦点移动到另一个元素，就会失去该样式。要在鼠标按钮按下的那一刻专门获得点击样式，使用 JavaScript或者试试:active选择器，它（我刚刚意识到）可以应用于非锚元素。
