: CSS Pseudo-Klasse oder ähnliches berühren?

Ich versuche, eine Schaltfläche so zu erstellen, dass sie beim Klicken des Benutzers ihren Stil ändert, während die Maustaste gedrückt gehalten wird. Ich möchte auch, dass es seinen Stil auf ähnliche Weise ändert, wenn es in einem mobilen Browser berührt wird. Das scheinbar Offensichtliche für mich war, das CSS zu verwenden: aktive Pseudoklasse, aber das hat nicht funktioniert. Ich habe versucht: Fokus, und es hat auch nicht funktioniert. Ich versuchte: schwebe, und es schien zu funktionieren, aber es behielt den Stil bei, nachdem ich meinen Finger vom Knopf genommen hatte. Alle diese Beobachtungen wurden auf einem iPhone 4 und einem Droid 2 gemacht.

Gibt es eine Möglichkeit, den Effekt auf mobile Browser (iPhone, iPad, Android und hoffentlich andere) zu replizieren? Im Moment mache ich so etwas:

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

Die: aktive Pseudoklasse ist für Desktop-Browser und die aktive Klasse für Touch-Browser.

Ich frage mich, ob es einen einfacheren Weg gibt, ohne Javascript einzubeziehen.

Es gibt keine :touchin den W3C-Spezifikationen http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active sollte funktionieren, würde ich denken.

Die Reihenfolge in der :active/ :hoverpseudo-Klasse ist wichtig, damit sie ordnungsgemäß funktioniert.

Hier ist ein Zitat aus dem obigen Link

Interaktive Benutzeragenten ändern manchmal das Rendering als Reaktion auf Benutzeraktionen. CSS bietet drei Pseudoklassen für häufige Fälle:

• Die Pseudoklasse: hover gilt, während der Benutzer ein Element (mit einem Zeigegerät) bezeichnet, es jedoch nicht aktiviert. Beispielsweise könnte ein visueller Benutzeragent diese Pseudoklasse anwenden, wenn der Cursor (Mauszeiger) über einem vom Element generierten Feld bewegt wird. Benutzeragenten, die interaktive Medien nicht unterstützen, müssen diese Pseudoklasse nicht unterstützen. Einige konforme Benutzeragenten, die interaktive Medien unterstützen, können diese Pseudoklasse möglicherweise nicht unterstützen (z. B. ein Stiftgerät).
• Die Pseudoklasse: active gilt, während ein Element vom Benutzer aktiviert wird. Beispielsweise drückt der Benutzer zwischenzeitlich die Maustaste und lässt sie los.
• Die Pseudoklasse: focus gilt, während ein Element den Fokus hat (akzeptiert Tastaturereignisse oder andere Formen der Texteingabe).

Da das Handy kein Hover-Feedback gibt, möchte ich als Benutzer sofortiges Feedback sehen, wenn auf einen Link getippt wird. Mir ist aufgefallen, dass dies -webkit-tap-highlight-coloram schnellsten zu reagieren ist (subjektiv).

Fügen Sie Ihrem Körper Folgendes hinzu, und Ihre Links haben einen Tap-Effekt.

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