: touchez la pseudo-classe CSS ou quelque chose de similaire?

J'essaie de créer un bouton, de sorte que lorsque l'utilisateur clique dessus, il change de style pendant que le bouton de la souris est maintenu enfoncé. Je veux également qu'il change de style de la même manière s'il est touché dans un navigateur mobile. La chose apparemment évidente pour moi était d'utiliser le CSS: pseudo-classe active, mais cela n'a pas fonctionné. J'ai essayé: focus, et ça n'a pas fonctionné aussi. J'ai essayé: survoler, et cela semblait fonctionner, mais cela a gardé le style après avoir enlevé mon doigt du bouton. Toutes ces observations concernaient un iPhone 4 et un Droid 2.

Existe-t-il un moyen de reproduire l'effet sur les navigateurs mobiles (iPhone, iPad, Android et, espérons-le, d'autres)? Pour l'instant, je fais quelque chose comme ceci:

<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>

La pseudo-classe: active est destinée aux navigateurs de bureau et la classe active aux navigateurs tactiles.

Je me demande s'il existe un moyen plus simple de le faire, sans impliquer Javascript.

Il n'y a rien de tel que :touchdans les spécifications du W3C, http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active devrait fonctionner, je pense.

L'ordre sur la classe :active/ :hoverpseudo est important pour qu'elle fonctionne correctement.

Voici une citation de ce lien ci-dessus

Les agents utilisateurs interactifs modifient parfois le rendu en réponse aux actions de l'utilisateur. CSS fournit trois pseudo-classes pour les cas courants:

• La pseudo-classe: hover s'applique lorsque l'utilisateur désigne un élément (avec un périphérique de pointage), mais ne l'active pas. Par exemple, un agent utilisateur visuel pourrait appliquer cette pseudo-classe lorsque le curseur (pointeur de la souris) survole une boîte générée par l'élément. Les agents utilisateurs qui ne prennent pas en charge les médias interactifs n'ont pas à prendre en charge cette pseudo-classe. Certains agents utilisateurs conformes prenant en charge les médias interactifs peuvent ne pas être en mesure de prendre en charge cette pseudo-classe (par exemple, un dispositif à stylet).
• La pseudo-classe: active s'applique lorsqu'un élément est activé par l'utilisateur. Par exemple, entre les moments où l'utilisateur appuie sur le bouton de la souris et le relâche.
• La pseudo-classe: focus s'applique lorsqu'un élément a le focus (accepte les événements clavier ou d'autres formes d'entrée de texte).

Étant donné que le mobile ne donne pas de retour de survol, je souhaite, en tant qu'utilisateur, voir un retour instantané lorsqu'un lien est activé. J'ai remarqué que -webkit-tap-highlight-colorc'est la réponse la plus rapide (subjective).

Ajoutez ce qui suit à votre corps et vos liens auront un effet de robinet.

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

J'avais des problèmes avec le style des boutons de l'écran tactile mobile. Cela résoudra vos problèmes de hover-stick / bouton actif.

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>