Um Webseiten zu analysieren bzw. Änderungen am CSS-Code leichter durchführen und testen zu können verwenden ich die Tools der Browser. Das sind im Google Chrome die Entwicklertools, im Firefox der Webinspektor oder im Edge die Entwicklungstools (jeweils erreichbar über das Menü des Browser oben rechts – drei Punkte neben- oder untereinander).

Bisher wusste ich nicht dass man hier den Zustand eines Buttons fixieren kann, so dass man z.B. den CSS-Code für den hover-Effekt leichter herausfindet.

Dazu wählt man in Chrome oder Edge unter Styles den Button „:hov“ (neben Filter) oder im Firefox den Button mit den drei blauen Rechtecken. Hier kann man dann den gewünschten Status des Elements anklicken und so den entsprechenden CSS-Code herausfinden.