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

84

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.

Elias Zamaria
quelle
2
Fast jeder Touch-Browser handhabt Dinge wie hoverund mousedown/ oder mouseupanders, es ist schwierig, sie alle unterzubringen.
Tschad
Android und iOS haben beide: touchstart ,: touchmove ,: touchend und: touchcancel pseudoclasses, die Sie verwenden können.
Paul Hanbury
2
Ich habe versucht, Stile für die Pseudoklassen: touchstart und: touchend festzulegen, und sie funktionierten weder auf dem iPhone noch auf dem Droid. @Paul Hanbury, sind Sie sicher, dass Sie CSS-Pseudoklassen nicht mit Javascript-Ereignissen verwechseln?
Elias Zamaria
1
@ Mikez302 - Ich denke du hast Recht. plugins.jquery.com/plugin-tags/touchstart
Doug Chamberlain
2
Ich würde mich dumm fühlen, dies als Antwort einzureichen, aber tatsächlich lautet die Antwort "Nein, es ist nicht möglich, Sie müssen Javascript verwenden." Was Sie verlangen, ist nicht Teil von CSS2 oder CSS3. Ich denke, die Tatsache, dass: active nicht funktioniert, ist ein User-Agent-Problem, das Sie möglicherweise als Fehler in den iOS- und Android-Browsern melden könnten, aber nur um Ihr Endbenutzerproblem zu lösen ... Ja, Sie müssen JS verwenden . Sie können Ihren Kompatibilitätscode in eine Überprüfung für die Unterstützung von ontouchstart einschließen .
Joelhardi

Antworten:

49

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).
Doug Chamberlain
quelle
9
Ich wusste, dass es so etwas wie Berührung nicht gab. Ich habe mich gefragt, ob es etwas Ähnliches gibt. : active schien vernünftig, aber es hat in meinen Tests nicht funktioniert.
Elias Zamaria
@ mikez302 - Ich dachte du wüsstest, dass ich meine Quelle zitieren wollte. Ich stimme Ihnen zu. Ich sehe keinen Grund, warum es nicht funktionieren würde, außer meinem Standpunkt, dass die Reihenfolge sehr wichtig ist. Ich habe gesehen, dass jemand etwas über die CSS-Pseudo-Selektoren für IOS und Android gepostet hat, aber ich konnte nicht mit diesen Technologien sprechen.
Doug Chamberlain
Ich habe in meinem Beispiel die Regeln: active und: hover umgeschaltet und es schien nichts zu bewirken.
Elias Zamaria
36
@ mikez302: die Verwendung :activePseudoklasse . Es sollte funktionieren, aber in einigen Browsern müssen Sie einen kleinen Hack , damit es funktioniert: einen Event - Handler zum befestigen touchstartEreignis auf dem Körper (zB: <body ontouchstart="">)
gion_13
5
Nur um auf @ mikez302 Kommentar in der letzten Antwort zu berühren, es ist eine nette Korrektur in der HTML5 Mobile Boilerplate, die auf diesen Artikel verweist
Giles Butler
19

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;
}
Abdo
quelle
Dies scheint am zuverlässigsten zu sein, sieht aber nicht am besten aus. Die Hintergrundfarbe scheint sich ein wenig aus dem Element heraus zu erstrecken, sodass es für einen kurzen Moment größer aussieht.
Adam
@Adam yup, ich konnte das nicht umgehen, wie ich mich erinnere, aber dies war nur für den Bruchteil einer Sekunde keine große Sache für mich, insbesondere, dass der Benutzer Feedback erhalten würde, auf das er geklickt hat (was ist) was für sie in diesem Bruchteil der Zeit wichtig ist)
Abdo
Ich habe am Ende tatsächlich die aktiven Pseudo-Stile erhalten, indem ich einfach eine Funktion mit einem leeren Rückruf an das Ereignis document.ontouchstart (über jQuery) gebunden habe.
Adam
Keine schlechte Idee :-) Zu diesem Zweck habe ich Javascript ganz vermieden.
Abdo
2
Nur das Teilen, -webkit-tap-highlight-colordas keine Standard-CSS-Funktion ist , verwende ich :activestattdessen. Es passt wirklich und macht Sinn.
Ricardo Fornes