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.
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“.
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.
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“.
