如何在鼠标悬停和点击时为“提交”按钮设置样式？

Question

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

- daysrunaway

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演示。

- David Thomas

Answer 2

与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)*/}

当用户初始点击（或聚焦）时，将应用焦点样式，但一旦用户将焦点移动到另一个元素上，则会失去样式。要在鼠标按钮按下的那个小瞬间内获取特定的点击样式，请尝试使用:active选择器，该选择器可以应用于非锚点元素。

- Wesley Murch