html - 提交按钮上的 3 种状态

Question

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

score 4 · Accepted Answer

这是你想要的？

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

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

score 1 · Accepted Answer

1

于 2012-04-11T13:39:42.853 回答

score 0 · Accepted Answer

我发现为此类事物提供 id 或类以使其更容易更容易。您可以在 jquery 中执行以下操作：

假设按钮有一个#derp id。

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

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

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

score 0 · Accepted Answer

0

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

于 2012-04-11T13:39:04.100 回答

4 回答 4