:hover auf iOS Devices

Beim Schreiben unseres letzten Artikels ist uns aufgefallen, dass die :hover-Effekte auf iOS Devices nicht funktionieren. Nach einiger Recherche tragen wir in diesem Artikel unsere Erkenntnisse zusammen.

:hover, :active und :focus nur für Links

Häufig werden Effekte, welche auf dem Desktop beim Hovern gezeigt werden, auf mobilen Devices durch einen Touch-Event ausgelöst. Erst ein zweiter Touch öffnet dann den Link, welcher auf dem Desktop direkt beim Klick öffnet. Viele Entwickler haben sich hierfür angewöhnt neben dem :hover, das selbe Element auch mit :active und :focus anzusprechen, um den Effekt auf möglichst vielen Devices abzudecken. Allerdings funktioniert dies für iOS Geräte nur mit Links. Soll ein Effekt auf ein anderes Element gelegt werden, wie die Animationen in unserem letzten Artikel, ist dieser auf iOS nicht sichtbar.

{cursor: pointer;}

Im Web finden sich verschiedenste Lösungen für dieses Problem. Meistens wird hierfür auf JS zurückgegriffen, was wir eigentlich vermeiden wollten. Unter den Ansätzen findet sich aber auch immer wieder eine Methode, die gänzlich ohne Skripte auskommt.

Laut diesem Beitrag  muss auf das Element, welches mit dem :hover selector angesprochen werden soll, zusätzlich ein {cursor: pointer;} gelegt werden. Dies entspräche auch dem Verhalten bei einem echten Link. Ein Beispiel könnte also folgendermassen aussehen:

<p class="hover-effekt">Text</p>
<style>
 .hover-effekt {cursor: pointer;}
 .hover-effekt:hover,
 .hover-effekt:focus,
 .hover-effekt:active {
 color: #ff3500;
 }
</style>

Tatsächlich funktionierte diese Lösung in manchen Fällen. Allerdings liessen sich in einem Test nicht alle Elemente auf iOS triggern. Hierbei gab es auch Unterschiede zwischen iOS 8 und 9, sowie zwischen iPad und iPhone.

onclick=““

Letztlich stiessen wir im selben Thread auf StackOverflow auf diesen Beitrag. Auf das Element welches über den :hover selector angesprochen wird, soll in diesem Fall zusätzlich onclick=““ gesetzt werden. Dies würde also so aussehen:

<p onclick="" class="hover-effekt">Text</p>
<style>
 .hover-effekt:hover,
 .hover-effekt:focus,
 .hover-effekt:active {
 color: #ff3500;
 }
</style>

Tatsächlich funktionierte dies zuverlässig in verschiedenen Tests. Im Folgenden haben wir die verschiedenen Möglichkeiten noch einmal dargestellt:

nur cursor: pointer;

nur onclick=““

cursor: pointer; und onclick=““

Auf unseren iOS Devices funktioniert der Effekt nur bei den beiden unteren Versionen. Warum die erste Lösung hier nicht funktioniert, an anderen Stellen aber doch, ist für uns nicht nachvollziehbar. Diese Methode ist definitiv quick and dirty, aber sie erfüllt ihren Zweck. Wie bereits erwähnt gibt es auch diverse Lösungen mit JavaScript bzw. jQuery. Unserer Meinung nach wäre das in diesem Fall aber ein Overkill gewesen, weshalb wir hier den einfacheren Weg gewählt haben.

Uns würde interessieren, ob dies nun für alle iOS-Geräte übereinstimmt. Sehen Sie etwas anderes als wir? Wissen Sie eine bessere Methode oder haben eine Frage zum Thema? Hinterlassen Sie doch einfach ein Kommentar, wir freuen uns über jedes Feedback.

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.