Quicktipp: Hoverzustand in Entwicklertools untersuchen

Hover

Wenn man die Formatierungen, d.h. den CSS-Code, von Websites untersucht, möchte man oft auch den Hoverzustand von Links genauer betrachten. Auch das ist bei den gängigen Browser-Entwicklertools möglich. Die entsprechenden Optionen versteckt sich aber an unterschiedlichen Stellen.

Firefox

Die Firefox-Entwicklertools aktiviert man beispielsweise über Rechtsklick und dann „Element untersuchen“. Um den Hoverzustand eines Links auszuwählen, muss man zuerst den Link im HTML-Teil auswählen und klickt auf ihn mit der rechten Maustaste. Im Kontextmenü gibt es die Option „:hover“ und dann werden im Style-Bereich rechts die CSS-Formatierungen für den Hoverzustand angezeigt.

Hoverzustand in Firefox-Entwicklertools

Firebug

Wenn die Firefox-Erweiterung Firebug installiert ist, kann man sie aktivieren durch Rechtsklick auf der Webseite und dann „Element mit  Firebug untersuchen“. Den Hoverzustand wählt man im rechten“Styles“-Bereich aus. Wenn man hier auf den kleinen Pfeil neben Styles klickt, gibt es im Ausklappmenü die Option „:hover“.

Hoverzustand im Firebug untesuchen

Chrome-/Opera-Entwicklertools

Die Chrome-Entwicklertools aktiviert man auch ganz rasch über Rechtsklick und dann „Element untersuchen“. Dann kann man, wenn man auf einen Link im HTML-Teil geklickt hat, im Kontextmenü (Klick mit rechter Maus) den Hover-Zustand unter „Force element state“ auswählen. Genauso funktioniert es auch bei Opera.

Hover Chrome-Entwicklertools

Internet Explorer 11 – Entwicklertools

Auch die Entwicklertools vom Internet Explorer 11 lassen sich leicht durch einen Rechtsklick und „Element untersuchen“ aufrufen. Wenn ein Link aktiviert ist, wählt man den Hoverzustand im rechten Teil aus. Hier gibt es im Tab „Formatvorlagen“ eine Schaltfläche mit „a:“. Darüber lassen sich die Optionen für den Linkzustand ein- oder ausblenden. Den Hover-Zustand aktiviert man über die Checkox „Darauf zeigen“.

Hoverzustand Entwicklertools Internet Explorer

Kommentare sind geschlossen.