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!

20 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 #

Brilliant! Works flawlessly. Hab‘ vielen Dank.

by Chris on 29. Juni 2017 at 09:52. Antworten #

Herzlichen Dank! Das hat einwandfrei funktioniert!

by Fabian on 27. Juli 2017 at 17:33. Antworten #

[…] Wenn man sie aber einsetzt, sollten sie natürlich auf allen Geräten funktionieren. Probleme kann es mit alten iPhones und iPads geben. Dort lässt sich das Menü unter Umständen gar nicht bedienen, öffnet sich also beim Tippen darauf nicht. Ein Kunde hatte mir gemeldet, dass dieses Hamburger-Menü mit seinem älteren iPhone nicht bedienbar war; ich konnte das Fehlverhalten mit einem iPad 1 nachvollziehen. Folgende Lösungen habe ich gefunden: Fix CSS hover on iPhone/iPad/iPod Super einfacher iOS Hover Fix […]

by Hamburger-Menü klappte nicht unter iPad 1 | Mediengestaltung Torsten Kelsch on 29. Juli 2017 at 08:30. Antworten #

Vielen Dank. Läuft perfekt 🙂

by Fabian on 29. September 2017 at 16:42. Antworten #

Könnte mir vielleicht jemand erklären, wo genau ich diesen Code-Schnipsel einfügen muss?
Arbeite mit wordpress und dem impreza theme. habe beide schnipse in das CSS Feld von Impreza gepackt aber auf dem iPhone 8 wird kein Hovereffekt angezeigt.
Was bewirkt der Code denn eigentlich? Täuscht der ein hovern vor? Und wenn ja, wo? auf dem ganzen Bildschirm vom iPhone?

Beherrsche nur minimale Grundlagen in CSS und bitte um verzeihung hehe.

LG

by ynnckwlf on 22. Dezember 2017 at 09:00. Antworten #

Hallo. Der Codeschnipsel muss in den <head> Bereich deiner Seiten. Abhängig vom Theme findest Du die Einträge, die sich darin befinden, an unterschiedlichen Stellen. Du kannst sie zum Beispiel über die functions.php hinzufügen. Die sicherste Wette ist aber die header.php. Dort müsstest Du zwei Zeilen finden: <head> und </head>. Dort zwischen (am Besten direkt vor das schließende </head>) setzt Du den Code-Schnipsel und speicherst die Datei dann ab. Die dazu gehörigen Klassen fügst Du dann natürlich in die CSS-Datei Deines Themes ein.

by Sebastian Klammer on 30. Dezember 2017 at 15:28. Antworten #

Hallo,

Neee natürlich geht es nicht. hätte ich mir aber denken können.

was hat man davon wenn man solchen mist schreibt der vorn und
hinten nicht funktioniert? Bekommt man davon warme füße?

by peter meyer on 4. Januar 2018 at 01:36. Antworten #

Nun, wenn der Fix bei allen anderen zu funktionieren scheint (ich selbst habe ihn erst kürzlich wieder benutzt), nur bei Dir nicht… woran könnte das dann wohl liegen?

by Sebastian Klammer on 4. Januar 2018 at 07:30. Antworten #

Moin,
vielen Dank für den Fix.
Bei mir ergibt sich jetzt allerdings folgendes Problem. Ich habe einen Onepager und die Navigation bleibt nach dem Klick auf einen Navigationspunkt stehen. Hast du evtl. eine Lösung, dass die Navigation nach dem Klick auf einen Navigationspunkt wieder verschwindet?

by Kri on 2. März 2018 at 14:30. Antworten #

Oh Mann! Ich habe das Web jetzt eine gute Stunde durchforstet und ewig an irgendwelchen JavaScript Formulierungen rumgebastelt und keine hat so richtig funktioniert. Das hier war die Lösung und noch dazu super einfach, Danke sehr!!

by Robin on 11. April 2018 at 16:50. Antworten #

Sag etwas zu diesem Beitrag.

Pflichtfeld.

Required. Wird nicht gezeigt.

Wenn vorhanden.