Wie kann ich :hover-Zustände in Chrome DevTools überprüfen?

Untersuchen von :hover-Zuständen in Chrome-Entwicklertools

Bei der Webentwicklung ist es oft notwendig, den Stil von Elementen in verschiedenen Zuständen zu überprüfen, einschließlich des :hover-Zustands. Während Firebug ein praktisches Stil-Dropdown-Menü zum Auswählen verschiedener Status bietet, scheinen die Chrome-Entwicklertools in dieser Hinsicht zu fehlen.

Verborgene :hover-Statusoptionen aufdecken

Die Chrome-Entwicklertools bieten jedoch tatsächlich die Möglichkeit dazu Anzeigen und Bearbeiten von :hover-Zuständen. So greifen Sie auf diese Optionen zu:

• Navigieren Sie zum Bereich „Stile“ in den Chrome-Entwicklertools.
• Klicken Sie auf den kleinen Text „:hov“ in der oberen rechten Ecke des Bereichs „Stile“. Dadurch wird eine Liste von Pseudoklassenregeln angezeigt, einschließlich :hover.

Erzwingen des :hover-Zustands

Zusätzlich können Sie ein Element zur einfacheren Überprüfung in den :hover-Zustand zwingen:

• Klicken Sie mit der rechten Maustaste auf das Element im Elementebedienfeld.
• Wählen Sie „:hover“ aus Kontextmenü. Dadurch werden die :hover-Stile vorübergehend auf das Element angewendet.

Tipps zur Verwendung des Elementefensters

• Um zum Standardzustand zurückzukehren, klicken Sie einfach auf „:default“ im Dropdown-Menü „Elementstatus“.
• Weitere Informationen zum Arbeiten mit dem Bedienfeld „Elemente“ finden Sie in den Chrome-Entwicklertools Verknüpfungen.

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