Super einfacher iOS Hover Fix

von Sebastian 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!

Sag etwas zu diesem Beitrag.

Pflichtfeld.

Required. Wird nicht gezeigt.

Wenn vorhanden.