Estou tentando fazer um botão que, quando o usuário clica nele, muda de estilo enquanto o botão do mouse é pressionado. Também quero que ele mude seu estilo de maneira semelhante se for tocado em um navegador móvel. O que parecia óbvio para mim era usar o CSS: pseudo-classe ativa, mas não funcionou. Eu tentei: foco, e não funcionou também. Eu tentei: pairar, e pareceu funcionar, mas manteve o estilo depois que tirei meu dedo do botão. Todas essas observações foram feitas em um iPhone 4 e um Droid 2.
Existe alguma maneira de replicar o efeito em navegadores móveis (iPhone, iPad, Android e, possivelmente, outros)? Por enquanto, estou fazendo algo assim:
<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>
A pseudo classe: active é para navegadores de desktop, e a classe active é para navegadores de toque.
Gostaria de saber se existe uma maneira mais simples de fazer isso, sem envolver Javascript.
hover
emousedown
/mouseup
diferentemente, é difícil acomodar todos eles.