我正在尝试制作一个按钮，这样当用户单击它时，它会在按住鼠标按钮的同时改变其样式。如果在移动浏览器中触摸它，我还希望它以类似的方式更改其样式。对我来说看似显而易见的事情是使用 CSS :active 伪类，但这不起作用。我试过:focus，但也没有用。我试过 :hover ，它似乎有效，但在我将手指从按钮上移开后它保持了样式。所有这些观察都是在 iPhone 4 和 Droid 2 上进行的。
有什么方法可以在移动浏览器（iPhone、iPad、Android 以及其他）上复制这种效果？现在，我正在做这样的事情：
<style type="text/css">
#testButton {
background: #dddddd;
}
#testButton:active, #testButton.active {
background: #aaaaaa;
}
</style>
...
<button type="button" id="testButton">test</button>
...
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
$("*").live("touchstart", function() {
$(this).addClass("active");
}).live("touchend", function() {
$(this).removeClass("active");
});
</script>
:active 伪类用于桌面浏览器，而 active 类用于触摸浏览器。
我想知道是否有更简单的方法来做到这一点，而不涉及 Javascript。