Javascript :touch CSS 伪类或类似的东西？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6063308/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
:touch CSS pseudo-class or something similar?
提问by Elias Zamaria
I am trying to make a button, such that when the user clicks on it, it changes its style while the mouse button is being held down. I also want it to change its style in a similar way if it is touched in a mobile browser. The seemingly-obvious thing to me was to use the CSS :active pseudo-class, but that didn't work. I tried :focus, and it didn't work too. I tried :hover, and it seemed to work, but it kept the style after I took my finger off the button. All of these observations were on an iPhone 4 and a Droid 2.
我正在尝试制作一个按钮，这样当用户单击它时，它会在按住鼠标按钮的同时改变其样式。如果在移动浏览器中触摸它，我还希望它以类似的方式更改其样式。对我来说看似显而易见的事情是使用 CSS :active 伪类，但这不起作用。我试过:focus，但也没有用。我试过 :hover ，它似乎有效，但在我将手指从按钮上移开后它保持了样式。所有这些观察都是在 iPhone 4 和 Droid 2 上进行的。
Is there any way to replicate the effect on mobile browsers (iPhone, iPad, Android, and hopefully others)? For now, I am doing something like this:
有什么方法可以在移动浏览器（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>
The :active pseudo-class is for desktop browsers, and the active class is for touch browsers.
:active 伪类用于桌面浏览器，而 active 类用于触摸浏览器。
I am wondering if there is a simpler way to do it, without involving Javascript.
我想知道是否有更简单的方法来做到这一点，而不涉及 Javascript。
采纳答案by Doug Chamberlain
There is no such thing as :touchin the W3C specifications, http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors
:touchW3C 规范中没有这样的东西，http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors
:activeshould work, I would think.
:active应该工作，我想。
Order on the :active/:hoverpseudo class is important for it to function correctly.
:active/:hover伪类的顺序对于它正确运行很重要。
Here is a quote from that above link
这是上面链接的引述
Interactive user agents sometimes change the rendering in response to user actions. CSS provides three pseudo-classes for common cases:
交互式用户代理有时会根据用户操作更改渲染。CSS 为常见情况提供了三个伪类：
- The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not supporting interactive media do not have to support this pseudo-class. Some conforming user agents supporting interactive media may not be able to support this pseudo-class (e.g., a pen device).
- The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
- The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).
- :hover 伪类适用于用户指定元素（使用某些指针设备）但不激活它的情况。例如，当光标（鼠标指针）悬停在元素生成的框上时，可视化用户代理可以应用这个伪类。不支持交互式媒体的用户代理不必支持这个伪类。一些支持交互式媒体的符合要求的用户代理可能无法支持这个伪类（例如，笔设备）。
- :active 伪类在用户激活元素时适用。例如，在用户按下鼠标按钮和释放它之间的时间。
- :focus 伪类在元素具有焦点时适用（接受键盘事件或其他形式的文本输入）。
回答by Abdo
Since mobile doesn't give hover feedback, I want, as a user, to see instant feedback when a link is tapped. I noticed that -webkit-tap-highlight-coloris the fastest to respond (subjective).
由于移动设备不提供悬停反馈，因此作为用户，我希望在点击链接时看到即时反馈。我注意到这-webkit-tap-highlight-color是最快的反应（主观）。
Add the following to your body and your links will have a tap effect.
将以下内容添加到您的正文中，您的链接将具有点击效果。
body {
-webkit-tap-highlight-color: #ccc;
}
