Wie kann ich :hover-Stile in Chrome DevTools anzeigen und bearbeiten?

Anzeigen des Hover-Status in den Chrome-Entwicklertools

Im Gegensatz zu Firebug, das ein spezielles Stil-Dropdown-Menü für die Auswahl von Elementzuständen bereitstellt, bieten die Chrome-Entwicklertools dies eine subtilere Methode für مشاهده:hover Stile.

Lösung:

So greifen Sie auf die :hover-Regeln zu und bearbeiten deren Zustände:

1. Pseudoklassenanzeige aktivieren : Klicken Sie auf den kleinen Text „:hov“ oben rechts im Bereich „Stile“. Dadurch werden die :hover-Regeln neben den regulären CSS-Regeln angezeigt.
2. :hover-Status erzwingen: Klicken Sie mit der rechten Maustaste auf das gewünschte Element im Elementebedienfeld und wählen Sie „:hover“ aus dem Kontextmenü . Dadurch wird das Element in den Schwebezustand versetzt, sodass Sie die angewendeten Stile überprüfen können.

Zusätzliche Tipps:

• Weitere Tastaturkürzel und Weitere Informationen zu den Funktionen im Bedienfeld „Elemente“ finden Sie in der Dokumentation zu Chrome Developer Tools Shortcuts.
• Alternativ können Sie die Chrome-Erweiterung „Toggle Element“ verwenden Status“, um schnell zwischen verschiedenen Elementzuständen zu wechseln.

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