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

我正在尝试制作一个按钮，这样当用户点击它时，它会在鼠标按钮被按下时改变它的样式。我还希望如果在移动浏览器中触摸它，它也能以类似的方式改变它的样式。对我来说，似乎显而易见的事情是使用 CSS: 活动的伪类，但这不起作用。我试过: 集中注意力，但是没有用。我试了一下: 悬停，它似乎工作，但它保持了风格后，我把我的手指关闭按钮。所有这些观察都发生在 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>

活动伪类用于桌面浏览器，活动类用于触摸浏览器。

我想知道是否有一种更简单的方法来做到这一点，而不涉及 Javascript。

116655 次浏览
小开
最佳答案

There is no such thing as :touch in the W3C specifications, http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active should work, I would think.

Order on the :active/:hover pseudo class is important for it to function correctly.

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:

  • 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).
小开

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-color is the fastest to respond (subjective).

Add the following to your body and your links will have a tap effect.

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

I was having trouble with mobile touchscreen button styling. This will fix your hover-stick / active button problems.

body, html {
width: 600px;
}
p {
font-size: 20px;
}


button {
border: none;
width: 200px;
height: 60px;
border-radius: 30px;
background: #00aeff;
font-size: 20px;
}


button:active {
background: black;
color: white;
}


.delayed {
transition: all 0.2s;
transition-delay: 300ms;
}


.delayed:active {
transition: none;
}
<h1>Sticky styles for better touch screen buttons!</h1>


<button>Normal button</button>


<button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button>


<p>The CSS :active psuedo style is displayed between the time when a user touches down (when finger contacts screen) on a element to the time when the touch up (when finger leaves the screen) occures.   With a typical touch-screen tap interaction, the time of which the :active psuedo style is displayed can be very small resulting in the :active state not showing or being missed by the user entirely.  This can cause issues with users not undertanding if their button presses have actually reigstered or not.</p>


<p>Having the the :active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button.</p>

小开

The much upvoted comment by @gion_13 solved the issue for me:

Add ontouchstart="" to your page's body element and the :active selector will work more as expected on touch screens. Still not perfect in Chrome.


提交答案