：touch CSS伪类或类似的东西？

Question

我正在尝试制作一个按钮，以便用户单击它时，按住鼠标按钮时它会更改其样式。如果在移动浏览器中触摸它，我也希望它以类似的方式更改其样式。对我来说，看似显而易见的事情是使用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伪类适用于桌面浏览器，而活动类适用于触摸浏览器。

我想知道是否有一种更简单的方法可以实现而不涉及Javascript。

Answer 1

:touchW3C规范中没有这样的内容

:active 我认为应该可以工作。

:active/ :hover伪类上的顺序对于使其正常运行很重要。

这是上面链接的报价

交互式用户代理有时会响应用户操作来更改呈现。CSS为常见情况提供了三种伪类：

* ：hover伪类在用户指定元素（使用某些定点设备）时适用，但不激活它。例如，当光标（鼠标指针）悬停在由元素生成的框上时，可视用户代理可以应用此伪类。不支持交互式媒体的用户代理不必支持此伪类。一些支持交互式媒体的合格用户代理可能无法支持此伪类（例如，笔设备）。
* ：active伪类在用户激活元素时适用。例如，在用户按下鼠标按钮并释放的时间之间。
* ：focus伪类适用于元素具有焦点的情况（接受键盘事件或其他形式的文本输入）。