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.
hover
etmousedown
/mouseup
différemment, il est difficile de les accueillir toutes.