it-swarm.com.de

: Touch CSS Pseudo-Klasse oder etwas ähnliches?

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 die Verwendung von CSS: active pseudo-class, aber das hat nicht funktioniert. Ich habe versucht: konzentrieren, und es hat auch nicht funktioniert. Ich versuchte: Schweben, und es schien zu funktionieren, aber es behielt den Stil, 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, die Auswirkungen 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: active-Pseudoklasse ist für Desktop-Browser und die active-Klasse für Touch-Browser.

Ich frage mich, ob es einen einfacheren Weg gibt, dies ohne Javascript zu tun.

78
Elias Zamaria

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

:active sollte funktionieren, würde ich denken.

Bestellung am :active/:hover Pseudoklasse ist wichtig, damit es richtig 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: hover-Pseudoklasse wird angewendet, wenn der Benutzer ein Element (mit einem Zeigegerät) bestimmt, es jedoch nicht aktiviert. Beispielsweise kann ein visueller Benutzeragent diese Pseudoklasse anwenden, wenn sich der Cursor (Mauszeiger) über einem vom Element generierten Feld befindet. Benutzerprogramme, die keine interaktiven Medien unterstützen, müssen diese Pseudoklasse nicht unterstützen. Einige konforme Benutzeragenten, die interaktive Medien unterstützen, sind möglicherweise nicht in der Lage, diese Pseudoklasse zu unterstützen (z. B. ein Stiftgerät).
  • Die: active-Pseudoklasse wird angewendet, während ein Element vom Benutzer aktiviert wird. Zum Beispiel zwischen dem Drücken und Loslassen der Maustaste durch den Benutzer.
  • Die Pseudoklasse: focus wird angewendet, während ein Element den Fokus hat (akzeptiert Tastaturereignisse oder andere Formen der Texteingabe).
44

Da das Handy kein Hover-Feedback gibt, möchte ich als Benutzer sofortiges Feedback erhalten, wenn auf einen Link geklickt wird. Ich habe bemerkt, dass -webkit-tap-highlight-color antwortet am schnellsten (subjektiv).

Wenn Sie Ihrem Körper Folgendes hinzufügen, haben Ihre Links einen Tippeffekt.

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