: tocca la pseudo-classe CSS o qualcosa di simile?

Sto cercando di creare un pulsante, in modo tale che quando l'utente fa clic su di esso, cambia il suo stile mentre si tiene premuto il pulsante del mouse. Voglio anche che cambi il suo stile in un modo simile se viene toccato in un browser mobile. La cosa apparentemente ovvia per me era usare il CSS: pseudo-classe attiva, ma non funzionava. Ho provato: messa a fuoco, e anche questo non ha funzionato. Ho provato: hover, e sembrava funzionare, ma ha mantenuto lo stile dopo che ho tolto il dito dal pulsante. Tutte queste osservazioni erano su un iPhone 4 e un Droid 2.

C'è un modo per replicare l'effetto sui browser mobili (iPhone, iPad, Android e, si spera, altri)? Per ora, sto facendo qualcosa del genere:

<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 è per i browser desktop e la classe attiva è per i browser touch.

Mi chiedo se esiste un modo più semplice per farlo, senza coinvolgere Javascript.

Non c'è niente come :touchnelle specifiche W3C, http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active dovrebbe funzionare, penserei.

L'ordine sulla classe :active/ :hoverpseudo è importante perché funzioni correttamente.

Ecco una citazione da quel link sopra

I programmi utente interattivi a volte cambiano il rendering in risposta alle azioni dell'utente. CSS fornisce tre pseudo-classi per casi comuni:

• La pseudo-classe: hover si applica mentre l'utente designa un elemento (con qualche dispositivo di puntamento), ma non lo attiva. Ad esempio, un programma utente visivo potrebbe applicare questa pseudo-classe quando il cursore (puntatore del mouse) si trova su un riquadro generato dall'elemento. I programmi utente che non supportano i media interattivi non devono supportare questa pseudo-classe. Alcuni programmi utente conformi che supportano i media interattivi potrebbero non essere in grado di supportare questa pseudo-classe (ad esempio, un dispositivo a penna).
• La pseudo-classe: active si applica mentre un elemento viene attivato dall'utente. Ad esempio, tra le volte in cui l'utente preme il pulsante del mouse e lo rilascia.
• La pseudo-classe: focus si applica mentre un elemento ha il focus (accetta eventi da tastiera o altre forme di input di testo).

Poiché il dispositivo mobile non fornisce feedback al passaggio del mouse, come utente desidero visualizzare un feedback immediato quando viene toccato un collegamento. Ho notato che -webkit-tap-highlight-colorè il più veloce a rispondere (soggettivo).

Aggiungi quanto segue al tuo corpo e i tuoi collegamenti avranno un effetto tocco.

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

Ho avuto problemi con lo stile dei pulsanti del touchscreen mobile. Questo risolverà i problemi del tuo hover-stick / pulsante attivo.

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>