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

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选择器，我（我刚刚意识到）可以应用于非锚元素

如何在鼠标悬停时设置“提交”输入的样式，单击？

2 个答案: