Pixelbash
Geschichten eines Medieninformatikers

iOS: CSS Hover Effekte auf dem iPad und dem iPhone

ein iPad auf einem Schreibtisch

Beim entwickeln eines Templates ist mir aufgefallen, dass es unter iOS einen Bug gibt, durch den die CSS Hover-Effekte nicht auslösen. Dabei geht es allerdings nicht um Links (also "a" Tags) sondern um alle anderen Tags wie z.B. DIVs oder LIs.

Vielleicht habt ihr das Problem auch schon einmal gehabt: Ihr arbeitet an einem responsiven Template, habt schöne CSS Hover-Effekte geschrieben, für euer Menü oder die Bilder-Galerie, aber irgendwie lösen diese Hover-Effekte auf dem iPad oder dem iPhone nicht aus.

Besonders ärgerlich ist es, wenn diese CSS Hover-Effekte dem Nutzer Informationen geben sollen, wenn er mit der Maus darüber fährt (z.B. wird beim hovern über ein Bild der Name des Fotografen angezeigt). Auf dem Desktop funktioniert das ganze auch problemlos. Doch dann schaut ihr euch euer Werk auf dem iPhone oder dem iPad an und wundert euch, wieso nichts passiert, wenn ihr z.B. auf besagtes Bild klickt.

Nun wie ich herausgefunden habe, lösen unter iOS die CSS-hover Eigenschaften nur dann aus, wenn es sich um einen Link handelt. Auf normalen Flächen wie z.B. einem DIV oder einem Bild lösen die Effekte nicht aus.

Die Lösung ist ganz simpel

Damit ihr die Lösung verstehen könnt müsst ihr kurz darüber nachdenken, was einen Link von einem DIV unterscheidet.
Klar, ein Link bringt euch zu einer anderen Seite, aber das ist für iOS unerheblich bzw nicht das entscheidende Kriterium. Beide können inline als auch als Block dargestellt werden. Das heißt man kann einen Link genau so gestalten wie ein DIV und umgekehrt.. Was muss ich aber einem DIV mitgeben, damit ich es, als normaler Nutzer nicht mehr von einem Link unterscheiden kann?

cursor:pointer;

Denn mit "cursor:pointer" verändert sich der Mauszeiger vom normalen Pfeil in die kleine Hand, die uns einlädt auf etwas drauf zu klicken. Und genau das ist auch die Lösung des Problems. Gebt einem DIV "cursor:pointer" als Eigenschaft, dadurch wird es von iOS als Link behandelt und die Hover-Effekte lösen beim antippen aus.

Ich hoffe ich konnte euch dadurch einiges an Stress bewahren und wünsche euch viel Spaß beim ausprobieren.

Zurück

Einen Kommentar schreiben

Newsletter abonieren

Aboniere jetzt den Pixelbash Newsletter und verpasse keine Artikel oder kostenlosen Downloads mehr.

Pixelbash T-Shirts

Stöbere jetzt durch den Pixelbash Shop und hol dir dein eigenes Pixelbash T-Shirt.

Jetzt bestellen

Folgen, Liken, Chatten

@pixelbash
fb.com/pixelbash
IRC: #pixelbash @ freenode