css - 如何在鼠标悬停时设置 "submit"输入的样式，单击？

Question

我需要设置两个不同输入的样式，使其在鼠标悬停和单击时显示不同，就像按钮一样。通常我会使用按钮；但是，其中之一是输入类型 =“重置”，我认为为此使用输入比编写表单重置脚本更简单。一种样式如何使用 CSS 输入类型为“提交”和“重置”的鼠标悬停和单击？

Answer 1

假设您指的是 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 */
}

JS Fiddle demo .