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

Question

我需要为两个不同的输入设置样式，使其在鼠标悬停和单击时显示不同，就像按钮一样。通常我会使用按钮;然而，其中之一是输入类型="reset"，我认为使用输入比编写表单重置脚本更简单。如何样式输入类型的"提交"one_answers"重置"与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提琴演示

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

焦点样式将在用户最初单击时应用(当然是焦点)，但一旦用户将焦点移动到另一个元素时将失去该样式。为了在鼠标按钮按下时特别获得点击样式，

使用javascript或尝试:active选择器，这(我刚刚意识到)可以应用于非锚元素。