Beispielseite zu iPhone-Events und `:hover`

Den drei weiter unten folgenden Beispielabsätzen wurde jeweils per CSS ein :hover-Effekt hinzugefügt. In standardkonformen Browsern wird die Schrift des jeweiligen Absatz rot.

Der zweite Absatz hat zusätzlich einen onclick-Event erhalten, der ihm die CSS-Klasse "background" zuweist. Ein Klick auf diesen Absatz färbt dadurch den Texthintergrund rosa.

Auch beim dritten Absatz gibt es den hover:-Effekt für die Schriftarbe und den onclick-Event für die Hintergrundfarbe. Letzterer wurde aber sofort wieder entfernt.

Beispiele

Absatz 1

Dieser Absatz hat ein :hover, aber kein click-Event.

Absatz 2

Dieser Absatz hatte einen onclick-Event. Daher funktioniert zusätzlich auch der hover-Effekt.

Absatz 3

Dieser Absatz hatte einen onclick-Event, dieser wurde aber sofort wieder entfernt.
Der hover-Effekt funktioniert deshalb noch immer.

Erläuterung

Betrachtet man diese Seite im Browser des iPhones oder des iPodtouch fallen die unterschiedlichen Verhaltensweisen auf. Der erste Absatz lässt sich nicht zu einer Veränderung bewegen. Auch bei langer Berührung mit dem Finger wird kein hover:-Effekt sichtbar und es erscheint kein Tooltip.

Der zweite Absatz wird bei Berührung zunächst leicht grau. Hält man den Finger auf dem Absatz erscheint ein Tooltip. Das ist das Standardverhalten für ein klickbares Element im iPhone-Safari. Entfernt man nun den Finger wird der Text rot und der Hintergrund rosa. Erst wenn man ein anderes klickbares Element mit dem Finger berührt wird der Text wieder schwarz.

Der dritte Absatz zeigt nahezu das gleiche Verhalten wie der zweite. Der Unterschied besteht darin, dass der click-Event wieder entfernt wurde und somit auch der Texthintergrund nicht verändert wird. Der hover:-Effekt funktioniert dennoch weiterhin.