Wie kann ich :hover-Stile in Chrome DevTools überprüfen?

Inspizieren: Hover-Stile in den Chrome-Entwicklertools

Wenn Sie die Stile eines Elements in Chrome überprüfen, möchten Sie möglicherweise die angewendeten Stile anzeigen wenn sich das Element im :hover-Zustand befindet. Im Gegensatz zu Firebug, das ein praktisches Dropdown-Menü zum Auswählen von Elementzuständen bietet, scheint den Entwicklertools von Chrome diese Funktionalität möglicherweise zu fehlen.

Finding the Hideout

Keine Angst! Mit den Chrome Developer Tools können Sie tatsächlich :hover-Stile überprüfen.

Um auf diese Stile zuzugreifen, navigieren Sie zum Bedienfeld „Elemente“ in den Chrome Developer Tools und klicken Sie auf den kleinen „:hov“-Text, der in der oberen rechten Ecke angezeigt wird des Bereichs „Stile“. Dadurch wird die Anzeige von Pseudoklassenregeln, einschließlich :hover, umgeschaltet.

Erzwingen des Hover-Status

Außerdem können Sie ein Element in :hover erzwingen Zustand zur einfacheren Inspektion. Klicken Sie mit der rechten Maustaste auf das Element und wählen Sie „:hover“ aus dem Kontextmenü. Dadurch werden die :hover-Stile auf das Element angewendet, sodass Sie deren Auswirkungen beobachten können.

Zusätzliche Ressourcen

Weitere Einblicke in das Elementfenster in Chrome Developer Weitere Informationen zu Tools finden Sie in der ausführlichen Anleitung zu Verknüpfungen.

Das obige ist der detaillierte Inhalt vonWie kann ich :hover-Stile in Chrome DevTools überprüfen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!