Javascript ：触摸CSS伪类或类似的东西？

我正在尝试制作一个按钮，这样当用户单击它时，它会在按住鼠标按钮的同时改变其样式。如果在手机浏览器中触碰它，我也希望它能以类似的方式改变它的样式。对我来说，最明显的事情是使用CSS:active伪类，但这不起作用。我试过：集中注意力，但也没用。我试着：悬停，它似乎工作，但它保持了风格后，我把手指从按钮上。所有这些观察都是在iPhone4和Droid2上进行的

有没有办法在手机浏览器（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>

#测试按钮{
背景：#dddddd；
}
#testButton:活动，#testButton.active{
背景：AAAAA；
}
...
测试
...
$（“*”）.live（“touchstart”，函数（）{
$（此）.addClass（“活动”）；
}).live（“touchend”，函数（）{
$（此）.removeClass（“活动”）；
});

：active伪类用于桌面浏览器，active类用于触摸浏览器

---

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

在W3C规范中没有

：touch

这样的东西

：我认为活动的

应该可以工作

：active

/

：hover

伪类上的顺序对于其正常运行很重要

下面是上面链接的引用

交互式用户代理有时会根据用户操作更改渲染。CSS为常见情况提供了三个伪类：

• ：hover伪类在用户指定元素时应用 （使用一些定点设备），但是 不要激活它。例如，一个可视的 用户代理可以应用此 当光标（鼠标）移动时的伪类 指针）悬停在生成的框上 按元素排序。用户代理不是 支持交互式媒体不需要 必须支持这个伪类。 支持一致性的用户代理 交互式媒体可能无法 支持此伪类（例如笔 设备）
• ：active伪类在元素被激活时应用 用户。例如，在 用户按下鼠标的次数 按钮，然后将其释放
• ：focus伪类在元素具有焦点时应用 （接受键盘事件或其他 文本输入的形式）

---

由于手机不提供悬停反馈，作为用户，我希望在点击链接时看到即时反馈。我注意到，

-webkit点击突出显示颜色

是响应最快的（主观）

将以下内容添加到您的身体中，您的链接将产生点击效果

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

---

我在手机触摸屏按钮的设计上遇到了问题。这将修复您的悬停杆/活动按钮问题

body，html{
宽度：600px；
}
p{
字体大小：20px；
}
钮扣{
边界：无；
宽度：200px；
高度：60px；
边界半径：30px；
背景：#00aeff；
字体大小：20px；
}
按钮：激活{
背景：黑色；
颜色：白色；
}
.延迟{
过渡：均为0.2s；
过渡延迟：300ms；
}
.延迟：激活{
过渡：无；
}

Sticky样式可提供更好的触摸屏按钮！
普通按钮
CSS:active psuedo样式显示在用户触摸某个元素（手指接触屏幕时）到触摸（手指离开屏幕时）之间。对于典型的触摸屏点击交互，显示：active psuedo样式的时间可能非常短，导致：active状态不显示或用户完全错过。如果用户的按钮按下是否确实重新启动，这可能会导致用户无法理解的问题

当用户与按钮进行交互时，如果在触摸后再使用：active Styleing（主动样式）数百毫秒，则可以提高用户的理解力。

几乎每个触摸浏览器都会以不同的方式处理悬停和

鼠标向下

/

等操作，很难适应它们。Android和iOS都有：touchstart、：touchmove、：touchend和：touchcancel伪类可供使用。我尝试设置：touchstart和：touchend伪类的样式，但它们在iPhone或Droid上不起作用@Paul Hanbury，你确定你没有把CSS伪类和Javascript事件混淆吗？@mikez302-我想你是对的。我觉得提交这个作为答案很傻，但事实上，答案是“不，这不可能，你必须使用Javascript。”你要求的不是CSS2或CSS3的一部分。我认为事实是：active不起作用是一个用户代理问题，您可能会在iOS和Android浏览器中报告为bug，但只是为了解决您的最终用户问题。。。是的，你必须使用JS。你可以把你的兼容代码包装在一个文件夹里。我知道没有触摸这样的东西。我想知道是否有类似的事情“主动”似乎合理，但在我的测试中不起作用。@mikez302-我想你知道我想引用我的来源。我同意你的看法，除了我关于订单非常重要的观点外，我看不出任何理由它不起作用。我确实看到有人发布了一些关于IOS和Android的css伪选择器的信息，但我无法谈论这些技术。在我的示例中，我切换了：活动和：悬停规则，但它似乎没有做任何事情。@mikez302：使用

：active

伪类。它应该可以工作，但在一些浏览器中，你需要一个小技巧来让它工作：在主体上的

touchstart

事件上附加一个事件处理程序（例如：

），只需在最后一个答案中触及@mikez302注释，它们是链接到本文的HTML5移动模板中的一个整洁的修复程序-这似乎是最可靠的，但它看起来不是最好的。这个