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.
hover
undmousedown
/ odermouseup
anders, es ist schwierig, sie alle unterzubringen.Antworten:
Es gibt keine
:touch
in 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
/:hover
pseudo-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:
quelle
:active
Pseudoklasse . Es sollte funktionieren, aber in einigen Browsern müssen Sie einen kleinen Hack , damit es funktioniert: einen Event - Handler zum befestigentouchstart
Ereignis auf dem Körper (zB:<body ontouchstart="">
)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-color
am schnellsten zu reagieren ist (subjektiv).Fügen Sie Ihrem Körper Folgendes hinzu, und Ihre Links haben einen Tap-Effekt.
quelle
-webkit-tap-highlight-color
das keine Standard-CSS-Funktion ist , verwende ich:active
stattdessen. Es passt wirklich und macht Sinn.