web-dev-qa-db-fra.com

: touchez 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 lorsque le bouton de la souris est enfoncé. Je veux aussi 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é: concentrez-vous et cela n'a pas fonctionné aussi. J'ai essayé: vol stationnaire, et ça a semblé fonctionner, mais ça a gardé le style après que j'ai enlevé mon doigt du bouton. Toutes ces observations étaient sur un iPhone 4 et un Droid 2.

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

<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 faire appel à Javascript.

javascriptjqueryhtmlcssmobile
78
Elias Zamaria

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

:active devrait fonctionner, je pense.

Commande sur le :active/:hover La pseudo-classe est importante pour son bon fonctionnement.

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 tant que l'utilisateur désigne un élément (avec un périphérique de pointage), mais ne l'active pas. Par exemple, un agent d'utilisateur visuel peut appliquer cette pseudo-classe lorsque le curseur (pointeur de la souris) survole une zone générée par l'élément. Les agents utilisateurs ne prenant pas en charge les médias interactifs ne doivent pas nécessairement 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 stylo).
  • 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 de clavier ou d'autres formes de saisie de texte).
44
Doug Chamberlain

É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;
}
17
Abdo