Super einfacher iOS Hover Fix

von Sebastian Klammer am Mai 14, 2015

ios Touch Fix

Wer Websites baut – insbesondere mobile oder responsive Websites -, der kennt das Problem: Man hat eine super ausgefeilte Navigation entworfen, die sich dezent im Hintergrund hält und erst bei Bedarf in den Vordergrund tritt – und sie funktioniert auf dem Desktop wunderbar. Spätestens auf dem Tablet oder dem Smartphone ist es dann aber vorbei mit dem Chic, weil die Geräte trotz aller Gesten eines nicht haben: einen Hover State. Für Uneingeweihte: „hovern“ ist das, was die Maus tut, während sie sich auf dem anzuklickenden Element befindet – zum Beispiel einer Schaltfläche -, BEVOR der Benutzer tatsächlich geklickt hat. Der Mauszeiger schwebt (engl: hover) also über dem entsprechenden Element, macht aber noch nichts. Dieser Zustand wird in Web-Anwendungen gerne verwendet, um schon mal vorgreifend ein Menü zu öffnen, zusätzliche Informationen anzuzeigen und dergleichen. Problem: auf Tablets und Smartphones gibt es keine Maus und demzufolge auch keinen Mauszeiger, der über irgendwelchen Elementen schweben könnte. Und genau das bereitet Web-Entwicklern schon seit einer Weile Probleme, denn es ist nicht so ganz einfach, dieses Problem zu umgehen.

Relativ einfach ist es noch, wenn das Element, das einen Hover State erhalten soll, ansonsten nichts weiter tut. Das heisst, wenn z.B. nur die Farbe des Elementes verändert oder zusätzliche Information angezeigt werden soll. In dem Fall kann man statt des Hover States einfach ein Klick-Event benutzen. Das bedeutet, die Zustandsveränderung ereignet sich dann nicht (nur) beim Schweben des Mauszeigers, sondern (auch) beim Anklicken. Das funktioniert auch unter iOS perfekt.

So richtig schwierig wird es aber, wenn das Element bereits eine Klickfunktion besitzt. Zum Beispiel, wenn es sich um einen Menüpunkt handelt, den man a) anklicken kann, der aber b) beim Schweben eine zusätzliche Menüebene öffnet. Hier kann man den Klickzustand nicht für Touch Devices nutzen, weil der bereits vergeben ist. Hier war es oft nötig, dem entsprechenden Element per JavaScript umständlich eine zusätzliche Klasse zuzuordnen, die den Hover-Zustand darstellt.

Jetzt bin ich allerdings über eine winzig kleine, super einfache Einstellung gestolpert, mit der man diese Problematik komplett umgehen kann. Es ist in der Tat so einfach, dass man versucht ist, sich mit der Hand an den Kopf zu schlagen! Dieser iOS Hover Fix hat zwei Teile:

In den Kopfbereich (head) der Website gehört folgende Zeile:

<script>document.addEventListener("touchstart", function(){}, true);</script>

Es gibt hier zahlreiche Variablen und Einstellmöglichkeiten, die man mit einer einfachen Suche nach „touchHandler“ recherchieren kann. Das Schöne aber ist, dass es auch so funktioniert. Ganz einfach, ganz unkompliziert. Wenn man das möchte.

Wichtig ist: In der CSS-Datei müssen alle Elemente, die einen Hover State besitzen (element:hover) um eine „active“ Pseudoklasse ergänzt werden. Das ganze sieht dann zum Beispiel so aus:

element:hover, element:active { CSS-Eigenschaften; -webkit-user-select: none; -webkit-touch-callout: none}

Voila! Hovern unter iOS. Probiert es mal aus!

Gefällt dir dieser Post? Sag es weiter!
Share on FacebookTweet about this on TwitterShare on Google+Pin on PinterestShare on LinkedInBuffer this pageShare on RedditShare on StumbleUponEmail this to someone

10 Kommentare

Das geht nicht mit dem hovern???

by Joerg on 25. Januar 2016 at 19:49. Antworten #

Geht doch! Super!

by Joerg on 25. Januar 2016 at 21:30. Antworten #

Sauber sauber, funktioniert wunderbar! Danke für die Hilfe 😉

by Oli on 9. Mai 2016 at 08:13. Antworten #

1000 Dank.
Das war genau das, was ich gesucht habe!

by Markus on 19. September 2016 at 09:08. Antworten #

Großartiger Fix! Vielen Dank dafür!

by Steffen Krägelin on 2. Dezember 2016 at 15:38. Antworten #

Besten Dank, das hat mir viele graue Haare erspart!!!

by Mike Arendt on 9. Dezember 2016 at 23:47. Antworten #

Danke! Funktioniert auf meinem iPhone mit iOS 10.3 auch ohne die css regeln 😉

by Daniel on 4. Februar 2017 at 01:14. Antworten #

Hi, bin erst 14 und habe die site für meinen Opa gebaut. Habe das Problem, dass die Untermenüs der nav mit der Maus angezeigt werden (hover), auf dem Smartphone aber nicht und somit die Untermenüs auch nicht geöffnet werden können. (klar bei hover)
Habe das Script

document.addEventListener(„touchstart“, function(){}, true);

in den Head-Bereich eingefügt (erst mal testweise nur in die Unterseite „Links“ im footer) und den Code

element:hover, element:active { CSS-Eigenschaften; -webkit-user-select: none; -webkit-touch-callout: none}

in die css-Datei eingefügt. Aber ich habe Probleme mit den Parametern und Argumenten. Wie muss ich den Code anpassen, damit auf dem Smartphone bei Berührung die Untermenüs tatsächlich angezeigt und geöffnet werden können?

sorry,ich lerne mich gerade ein

by Tommy on 25. März 2017 at 18:42. Antworten #

Falls das funktioniert, fände ich das absolut genial. Vielleicht könnte man für die Anfänger noch etwas genauer auf die Parameter der Funktion eingehen.

by Tommy on 25. März 2017 at 18:46. Antworten #

@Tommy
Wenn du bisher für die Darstellung möglicherweise ein
a:hover{eigenschaft:wert} verwendet hast, sollst du lediglich
diese um die „active“-Pseudoklasse erweitern zu:

a:hover, a:active{eigenschaft:wert}

by Jirko on 9. Mai 2017 at 08:47. Antworten #

Sag etwas zu diesem Beitrag.

Pflichtfeld.

Required. Wird nicht gezeigt.

Wenn vorhanden.