:触摸CSS伪类或类似的东西？

Question

我正在尝试创建一个按钮,这样当用户点击它时,它会在按住鼠标按钮时改变其样式.如果在移动浏览器中触摸它,我也希望它以类似的方式改变它的风格.对我来说看似显而易见的事情是使用CSS:active伪类,但这不起作用.我尝试过:专注,但它也没有用.我试过了:悬停,它似乎工作,但它把我的手指从按钮上移开后保持了风格.所有这些观察都在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

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

:active 应该工作,我想.

:active/ :hoverpseudo类的顺序对于它正常运行很重要.

以下是上述链接的引用

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

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

Answer 2

由于移动设备不提供悬停反馈,因此我希望作为用户在点击链接时看到即时反馈.我注意到这-webkit-tap-highlight-color是最快的回应(主观).

将以下内容添加到您的身体,您的链接将具有点击效果.

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