提交按钮上的 3 种状态答案

【问题标题】：3-States on a Submit Button提交按钮上的 3 种状态
【发布时间】：2012-04-23 19:44:51
【问题描述】：

我想知道如何将 3-States 添加到提交按钮。我所说的状态是指按钮在悬停、单击并且只是静态/未触摸时会更改图像。如果解决方案使用纯 HTML 和 CSS 但 Javascript 也可以，我更喜欢。谢谢！

【问题讨论】：

【解决方案1】：

我发现为此类事物提供 id 或类以使其更容易更容易。你可以在 jquery 中做这样的事情：

假设按钮有一个#derp id。

$("#derp").click(function(){
   $(this).toggleClass("pressed");
});

基本上，这将根据其状态从项目中添加或删除“按下”类。只需为 .pressed 添加 CSS 即可。

#derp {...}
#derp:hover {...}
#derp:active {...}
#derp.pressed {...}

【讨论】：

hmm.. 我不确定我是否完全理解上面的 jQuery 代码是做什么的？它会改变按钮类吗？要么？抱歉我没用过 jQuery。
我研究了 jQuery，现在它更有意义了。谢谢。
您好，抱歉回复晚了。是的，所以没有javascript就没有本地方法可以做到这一点。它的作用是，如果该元素没有“按下”类，它会在单击元素时添加该类。如果是这样，它将简单地删除该类。它更像是 jquery 上的一个简写属性，这也可以使用 addClass 和 removeClass 函数来完成，但是 toggleClass 基本上是它们两者的组合，专门用于这些目的。
使用切换的原因是，因为您希望它在单击时被选中，所以它要么是复选框行为，要么是选项卡导航。这两种情况都需要在某个时候将其停用，而使用 toggleClass 可以让您更轻松地做到这一点。
我明白它是将整个 class="derp" 添加到标签还是只是将值 derp 添加到类属性中。我需要添加类属性还是自动完成。再次为我的新手感到抱歉，谢谢。

【解决方案2】：

这是你要找的吗？

button[type=submit]
button[type=submit]:hover
button[type=submit]:active

编辑：保持“点击”状态可以使用 jQuery：http://jsfiddle.net/WYTHG/1/

【讨论】：

【解决方案3】：

试试这个http://jsfiddle.net/jfeltis/Ufs7u/

【讨论】：

【解决方案4】：

正常状态你应该很清楚，其他两个可以用 .element:hover 和 .element:active 样式

【讨论】：