: touch pseudo-klasa CSS czy coś podobnego?

Próbuję zrobić przycisk, który po kliknięciu przez użytkownika zmienia swój styl, podczas gdy przycisk myszy jest wciśnięty. Chcę też, żeby zmienił swój styl w podobny sposób, jeśli zostanie dotknięty w przeglądarce mobilnej. Pozornie oczywistą rzeczą było dla mnie użycie CSS: aktywna pseudoklasa, ale to nie zadziałało. Próbowałem: skupić się i to też nie działało. Spróbowałem: unosić się i wydawało się, że działa, ale zachował styl po zdjęciu palca z przycisku. Wszystkie te obserwacje dotyczyły iPhone'a 4 i Droida 2.

Czy istnieje sposób na odtworzenie tego efektu w przeglądarkach mobilnych (iPhone, iPad, Android i miejmy nadzieję, że inne)? Na razie robię coś takiego:

<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>

Pseudo-klasa: active jest przeznaczona dla przeglądarek na komputerze, a klasa active dla przeglądarek dotykowych.

Zastanawiam się, czy istnieje prostszy sposób na zrobienie tego bez angażowania JavaScript.

Nie ma czegoś takiego jak :touchw specyfikacji W3C, http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active powinno działać, myślę.

Kolejność w klasie :active/ :hoverpseudo jest ważna, aby działała poprawnie.

Oto cytat z powyższego linku

Interaktywne programy użytkownika czasami zmieniają renderowanie w odpowiedzi na działania użytkownika. CSS udostępnia trzy pseudoklasy dla typowych przypadków:

• Pseudoklasa: hover ma zastosowanie, gdy użytkownik wyznacza element (za pomocą jakiegoś urządzenia wskazującego), ale go nie aktywuje. Na przykład wizualny agent użytkownika może zastosować tę pseudoklasę, gdy kursor (wskaźnik myszy) znajdzie się nad polem wygenerowanym przez element. Programy klienckie, które nie obsługują multimediów interaktywnych, nie muszą obsługiwać tej pseudoklasy. Niektóre zgodne programy użytkownika obsługujące media interaktywne mogą nie być w stanie obsługiwać tej pseudoklasy (np. Urządzenie typu pióro).
• Pseudoklasa: active obowiązuje, gdy element jest aktywowany przez użytkownika. Na przykład między momentami, w których użytkownik naciska przycisk myszy i zwalnia go.
• Pseudoklasa: focus obowiązuje, gdy element ma fokus (akceptuje zdarzenia z klawiatury lub inne formy wprowadzania tekstu).

Ponieważ telefon komórkowy nie przekazuje informacji zwrotnych po najechaniu myszą, jako użytkownik chcę otrzymywać natychmiastowe informacje zwrotne po kliknięciu łącza. Zauważyłem, że -webkit-tap-highlight-colornajszybciej reaguje (subiektywne).

Dodaj następujące elementy do swojego ciała, a Twoje linki będą miały efekt dotknięcia.

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

Miałem problem ze stylizacją przycisków na ekranie dotykowym telefonu komórkowego. To rozwiąże problemy z najechaniem drążkiem / aktywnym przyciskiem.

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>