: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 伪类用于桌面浏览器，active 类用于触摸浏览器。

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

原文由 Elias Zamaria 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

W3C 规范中没有 :touch 这样的东西， http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active 我认为应该可以。

在 :active / :hover 伪类上的命令对于它的正常运行很重要。

这是上面链接的引述

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

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

原文由 Doug Chamberlain 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

由于移动设备不提供悬停反馈，作为用户，我希望在点击链接时看到即时反馈。我注意到 -webkit-tap-highlight-color 响应最快（主观）。

将以下内容添加到您的正文中，您的链接将具有点击效果。

 body {
    -webkit-tap-highlight-color: #ccc;
}

原文由 Abdo 发布，翻译遵循 CC BY-SA 3.0 许可协议