Siehe :Hover-Status in Chrome Developer Tools

Question

Ich möchte die :hover Stil für einen Anker, an dem ich mich in Chrom . Unter Firebug gibt es ein Stil-Dropdown, mit dem ich verschiedene Zustände für ein Element auswählen kann.

In Chrome kann ich nichts Vergleichbares finden. Übersehe ich etwas?

Answer 1

Ich glaube nicht, dass es eine Möglichkeit gibt, dies zu tun. Ich habe eingereicht eine Funktionsanfrage . Wenn es eine Möglichkeit gibt, werden die Entwickler bei Google sicher darauf hinweisen und ich werde meine Antwort ändern. Wenn nicht, müssen wir abwarten und beobachten. (Sie können die Frage mit einem Sternchen versehen, um für sie zu stimmen)

---

Kommentar 1 von Chrome Projektmitglied : In 10.0.620.0 zeigt das Stile-Panel die :hover-Stile für das ausgewählte Element, aber nicht :active.

---

(ab diesem Beitrag) Aktuell Stabiler Kanal Version ist 8.0.552.224.

Sie können Ihre Stabiler Kanal Installation von Google Chrome mit dem Beta-Kanal oder die Dev-Kanal (Siehe Kanäle für die frühzeitige Freigabe ).

Sie können auch eine Sekundärinstallation von Chrome, die noch aktueller ist als der Dev-Kanal .

... Der Canary-Build wird noch häufiger aktualisiert als der Dev-Kanal und wird vor seiner Veröffentlichung nicht getestet. Da der Canary-Build zeitweise unbrauchbar sein kann, kann er nicht als Standardbrowser festgelegt werden und kann zusätzlich zu einem der oben genannten Kanäle von Google Chrome installiert werden. ...

Answer 2

Ich weiß, dass das, was ich tue, eine ziemliche Umgehung ist, aber es funktioniert perfekt und ich mache es jedes Mal so.

Gehen Sie dann wie folgt vor:

• Vergewissern Sie sich zunächst, dass die Chrome-Entwicklerwerkzeuge abgedockt sind.
• Bewegen Sie dann einfach eine beliebige Seite des Dev Tools-Fensters in die Mitte des Elements, das Sie untersuchen möchten, während Sie den Mauszeiger darüber halten.

• Schließlich bewegen Sie den Mauszeiger über das Element, klicken Sie mit der rechten Maustaste und wählen Sie "Element inspizieren", bewegen Sie Ihre Maus in das Dev-Tools-Fenster und Sie können mit Ihrem Element:hover css spielen.

Zum Wohl!

Answer 3

Ich war dabei, ein Menü zu debuggen hover Status mit Chrome und tat dies, um in der Lage sein, um den Schwebezustand Code zu sehen:

In der Elements Panel anklicken Toggle Element state Taste und wählen Sie :hover .

In der Scripts Panel gehen zu Event Listeners Breakpoints im rechten unteren Bereich und wählen Sie Mouse -> mouseup .

Überprüfen Sie nun das Menü und wählen Sie das gewünschte Feld aus. Wenn Sie die Maustaste loslassen, sollte der Mauszeiger anhalten und den Schwebestatus des ausgewählten Elements im Feld Elements Panel (siehe die Styles Abschnitt).

Answer 4

Wechseln zu schweben Status in Chrome zu ändern, ist ziemlich einfach: Befolgen Sie einfach die folgenden Schritte:

1) Rechtsklick auf Ihrer Seite und wählen Sie inspizieren

2) Wählen Sie das Element, das Sie in der DOM

3) Wählen Sie das Pinsymbol (Elementstatus umschalten)

4) Kreuzen Sie dann das schweben

Jetzt können Sie den Schwebezustand des ausgewählten DOM im Browser!

Answer 5

Für mich, um diese QuickInfo zu debuggen, klicke ich auf die Symbolleiste des Geräts, um zur mobilen Ansicht zu wechseln, und klicke dann auf das div, das den Hover-Effekt hat. Sie können auch auf focus-visible klicken, um den Abstand zwischen dem div und der QuickInfo zu sehen.