Mezo Istvan beschreibt das Problem und eine Lösung dazu gut in einem Blogbeitrag auf Medium¹.
Wenn Sie auf etwas tippen, das einen :hover-Zustand hat, aber die Seite nicht verlassen, besteht auf einem Mobilgerät die Gefahr, dass der :hover-Zustand "kleben" bleibt. Das sehen Sie bei Dingen wie Jump-Links, die als Tabs oder Buttons verwendet werden, die Funktionalität auf der Seite auslösen.
button:hover {
border: 3px solid green; /* might stick! */
}Die Lösung oder der Trick ist eine neue(re) „CSS4“-Media Query, die es Ihnen ermöglicht, Stile nur auf Geräten mit Hover-Fähigkeit anzuwenden.
@media (hover: hover) {
button:hover {
border: 3px solid green; /* solves sticky problem */
}
}Ihr typisches Touchscreen-Mobilgerät wird diese Media Query nicht erfüllen, der Stil wird nicht angewendet und Sie vermeiden das Klebenbleiben.
Die Unterstützung ist solide, also kein großer Grund zur Sorge.
- Es fühlt sich fast so an, als müssten wir uns dafür entschuldigen, in letzter Zeit auf Dinge auf Medium zu verlinken. Ich habe keine Ahnung, was Sie dort erleben werden. Können Sie es einfach lesen? Ist es ein Teaser, für den Sie sich anmelden müssen, um mehr zu lesen? Steht es hinter einer Paywall? Ich habe keine Ahnung. Hoffentlich enthält dieser Link-Post in diesem Fall genügend Informationen, die Sie nicht davon abhalten, etwas zu lernen.
Ich mag die prägnante Art dieses Artikels.
Und bezüglich der Fußnote, danke, dass Sie diese hinzugefügt haben.
Ich persönlich denke, dass Artikel wie diese kein Medium (im wahrsten Sinne des Wortes) der Monetarisierung sein sollten.
Das ist auch einer der Gründe, warum ich gerne öfter hierher komme.
Leider musste ich mich dieses Mal bei Medium anmelden, um weiterzulesen. Danke für die Zusammenfassung hier!
Die Idee ist großartig, aber auf meinem Handy (Android 9) mit Chrome 80 funktioniert sie nicht.
Getestet mit dem folgenden Code
@media (hover: hover) {
html,body{
background:red !important;
}
}
Ich habe es auch auf https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover getestet
Beides schlug fehl
Das klingt vielleicht albern, aber warum werden :hover-Stile auf Touchscreens überhaupt wirksam, wenn sie die Media-Query-Prüfung nicht bestehen?
Ich schließe mich Jamies Frage an. Wenn ein Browser entscheidet, dass er die Hover-Media-Query nicht besteht, warum sollte er dann :hover-Pseudoklassen anerkennen? Kann jemand einen Anwendungsfall bedenken, in dem ein Browser die eine nicht aber die andere bestehen lassen möchte?
Das ist nett. Diese Media Query war mir vorher nicht begegnet.
Früher habe ich https://github.com/ten1seven/what-input verwendet, um
:hover- und:focus-Stile basierend auf der Eingabeart zu verwalten.Wenn Sie IE11 unterstützen müssen, schauen Sie sich diese Lösung an: https://stackoverflow.com/a/55867559
Ich glaube, dieser Weg ist einfacher