: toucher CSS pseudo-classe ou quelque chose de similaire?

Question

Je suis en train de faire un bouton, de sorte que lorsque l'utilisateur clique dessus, il change son style, tandis que le bouton de la souris est maintenu enfoncé. Je tiens aussi à changer son style dans une manière similaire, si il est touché dans un navigateur mobile. Apparemment l'-chose évidente pour moi, c'était d'utiliser le CSS :active la pseudo-classe, mais cela ne fonctionne pas. J'ai essayé :focus, et il ne fonctionne pas trop. J'ai essayé :hover, et ça semblait fonctionner, mais elle a gardé le style après, j'ai pris mon doigt sur le bouton. Toutes ces observations ont été sur un iPhone 4 et un Droid 2.

Est-il possible de reproduire l'effet sur les navigateurs mobiles (iPhone, iPad, Android, et j'espère que d'autres)? Pour l'instant, je suis en train de faire 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>

L' :active la pseudo-classe est pour les navigateurs de bureau, et la classe active est pour toucher les navigateurs.

Je me demande si il existe un moyen plus simple de le faire, sans la participation du Javascript.

Answer 1

Il n'y a pas une telle chose comme :touch dans les spécifications du W3C, http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active devrait fonctionner, je pense.

Ordonnance sur l' :active/:hover pseudo classe est important pour qu'il fonctionne correctement.

Voici une citation à partir de ce lien ci-dessus

L'utilisateur interactif agents changent parfois le rendu en réponse aux actions de l'utilisateur. CSS offre trois pseudo-classes pour les cas courants:

• Le :hover pseudo-classe s'applique que lorsque l'utilisateur désigne un élément (avec un dispositif de pointage), mais ne ne l'activez pas. Par exemple, un visuel l'agent utilisateur peut appliquer cette la pseudo-classe lorsque le curseur de la souris pointeur) plane au-dessus d'une boîte générée par l'élément. Les agents utilisateurs ne l'appui des médias interactifs ne pas à l'appui de cette pseudo-classe. Certains conforme de l'utilisateur des agents de soutien les médias interactifs peuvent ne pas être en mesure de l'appui de cette pseudo-classe (par exemple, un stylo de l'appareil).
• L' :active la pseudo-classe ne s'applique alors qu'un élément est activé par l'utilisateur. Par exemple, entre le fois que l'utilisateur appuie sur la souris bouton et la libère.
• L' :focus pseudo-classe ne s'applique alors qu'un élément a le focus (accepte les événements de clavier ou d'autres les formulaires de saisie de texte).

Answer 2

Étant donné que mobile ne donne pas de commentaire en vol stationnaire, je souhaite, en tant qu'utilisateur, voir un retour instantané lorsqu'un lien est exploité. J'ai remarqué que -webkit-tap-highlight-color est le plus rapide à répondre (subjectif).

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

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

Answer 3

J'ai pu développer une méthode pour faire exactement cela sur la base des conseils donnés par @ mikez302 http://stackoverflow.com/a/13080306/1776000