关于javascript :: touch CSS伪类或类似的东西？


:touch CSS pseudo-class or something similar?

我正在尝试制作一个按钮，以便用户单击该按钮时，按住鼠标按钮时它会更改其样式。如果在移动浏览器中触摸它，我也希望它以类似的方式更改其样式。对我来说，看似显而易见的事情是使用CSS：active伪类，但这没有用。我尝试了：focus，但是也没有用。我尝试：hover，它似乎起作用了，但是当我将手指从按钮上移开后，它仍然保持了样式。所有这些观察都在iPhone 4和Droid 2上进行。

是否有任何方法可以在移动浏览器(iPhone，iPad，Android和希望其他浏览器)上复制效果？现在，我正在做这样的事情：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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 type='text/javascript'>
    $("*").live("touchstart", function() {
      $(this).addClass("active");
    }).live("touchend", function() {
      $(this).removeClass("active");
    });

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

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

相关讨论

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

我认为

:active应该可以。

:active / :hover伪类上的顺序对于使其正常运行很重要。

这是上面链接中的引文

交互式用户代理有时会响应用户操作来更改呈现。 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).
相关讨论

由于移动设备无法提供悬停反馈，因此我希望作为用户在点击链接时能够看到即时反馈。我注意到-webkit-tap-highlight-color是最快的响应(主观)。

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

1
2
3
body {
    -webkit-tap-highlight-color: #ccc;
}
相关讨论

我在移动触摸屏按钮样式方面遇到麻烦。这将解决您的悬停/活动按钮问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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;
}
1
2
3
4
5
6
7
8
9
Sticky styles for better touch screen buttons!

<button>Normal button</button>

<button class="delayed">Delayed style</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>