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

【问题标题】：How to style "submit" inputs on mouseover, click?如何在鼠标悬停时设置“提交”输入的样式，单击？
【发布时间】：2011-08-11 06:45:46
【问题描述】：

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

【问题讨论】：

标签： css input click mouseover reset

【解决方案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.

【讨论】：

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

【讨论】：