Siehe: Hover-Zustand in Chrome Developer Tools

Question

Ich möchte die :hover Stil für einen Anker sehen, ich bin schwebt auf in Chrome. In Firebug, gibt es eine Art Drop-Down, die ich verschiedene Zustände für ein Element auswählen kann. Ich kann nichts finden ähnlich in Chrome zu sein scheinen. Bin ich etwas fehlt?

Answer 1

Sie können nun sowohl die Pseudo-Klasse Regeln sehen und sie zwingen, auf Elemente.

Um die Regeln wie :hover im Stil zu sehen Fenster den kleinen :hov Text in dem rechten oberen klicken.

Um ein Element in :hover Zustand zu zwingen, es rechts klicken.

Weitere Tipps auf dem Elementen Panel in Chrome Developer tools Shortcuts .

Answer 2

EDIT: Diese Antwort war vor dem Bug-Fix, tnothcutt Antwort finden Sie unter

Das war ein bisschen schwierig, aber hier geht.

• Rechtsklick Element, aber nicht von dem Element bewegen Sie den Mauszeiger weg, halten Sie es im Schwebezustand.
• Wählen Sie inspizieren Element über die Tastatur, wie in Hit Pfeil nach oben und drücken Sie Enter.
• Schauen Sie in Entwickler-Tool unter Matched CSS-Regeln, sollten Sie in der Lage sein, zu sehen. Hover

PS: Ich habe versucht, dies auf einer Ihrer Frage-Tags

.

Answer 3

Ich wollte den Hover-Zustand auf meinem Bootstrap Tooltips sehen. Erzwingen der das: Hover-Zustand in Chrome Entwickler-Tools hat die erforderliche Leistung nicht schaffen, noch die Auslösung der MouseEnter- Ereignis über die Konsole der Trick in Chrome wurde. Wenn jQuery auf der Seite vorhanden ist, kann man ausführen:

$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');

Answer 4

Es gibt mehrere Möglichkeiten, um zu sehen, HOVER STATE Stile in Chrome Developer Tools.

Method 01

eingeben

Method 02

eingeben

Mit Firefox Standard-Entwickler Toll

eingeben

Mit Firebug

eingeben

Answer 5

Falls es hilft, scheint dies in den neuesten leichter zu sein, Chrome (47.0.2526.106):

Element überprüfen und klicken Sie dann auf den drei weißen Punkte in der linken Rinne:

Wählen Sie dann das gewünschte Element Zustand aus diesem Drop-Down-:

Answer 6

Ich glaube nicht, dass es eine Möglichkeit, dies zu tun. Ich legte eine Feature-Anfrage . Wenn es einen Weg gibt, zeigen die Entwickler bei Google wird unwirsch es aus und ich werde meine Antwort bearbeiten. Wenn nicht, werden wir abwarten und sehen müssen. (Können Sie das Problem zu Stimme für Stern)

---

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

---

(wie dieses post) Aktuelle Stable Kanal Version 8.0.552.224.

Sie können ersetzen Sie Stable Channel Installation von Google Chrome mit der Beta-Kanal oder die Dev Channel (Siehe Early Access Update-Versionen ).

Sie können auch eine Sekundär Installation von Chrom installieren, die noch mehr auf dem neuesten Stand ist als der Dev-Kanal .

... Die Kanarischen Build wird noch häufiger aktualisiert als der Dev-Kanal und wird nicht geprüft, bevor sie freigegeben werden. Da die Kanarischen bauen manchmal unbrauchbar sein kann, kann es nicht als Standard-Browser eingestellt werden und kann zusätzlich zu einer der oben genannten Kanäle von Google Chrome installiert werden. ...

Answer 7

Ich weiß, dass das, was ich tue, ist ganz die Abhilfe, es aber funktioniert perfekt und das ist die Art, wie ich es tun, jedes Mal.

Dann gehen Sie wie folgt aus:

• Stellen Sie zunächst sicher Werkzeuge Chrome-Entwickler abgedockt ist.
• Dann bewegen Sie einfach eine beliebige Seite des Fensters Entwicklungstools zur Mitte des Elements Sie überprüfen wollen, während schwebte.

• Schließlich Hover das Element, Rechtsklick und Element prüfen, bewegen Sie die Maus in die Werkzeugfenster Dev und Sie werden in der Lage mit Ihrem Element zu spielen. Hover CSS

Cheers!

Answer 8

Ich war das Debuggen ein Menü hover Zustand mit Chrome und hat dies den Hover-Zustand Code sehen zu können:

Im Elements Panel Klick über 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.

Sie nun das Menü prüfen und wählen Sie die Box Sie wollen. Wenn Sie die Maustaste loslassen sollte es stoppen und zeigen Sie das ausgewählte Element schweben Zustand in der Elements Feld (Blick auf die Styles Abschnitt).

Answer 9

kann ich den Stil sehen, indem Sie unten Schritte von Babiker vorgeschlagen - „Rechtsklick-Element, aber nicht den Mauszeiger bewegen sich von dem Element weg, halten Sie es im Schwebezustand. Wählen Sie Element inspizieren über die Tastatur, wie in Hit Pfeil nach oben und drücken Sie Enter.“

Zum Ändern der Stil folgen obigen Schritte und dann - Ändern Sie Ihre Browser-Tab von STRG + TAB auf der Tastatur drücken. Klicken Sie dann auf die Registerkarte zurück Sie debuggen möchten. Ihr schweben Bildschirm wird noch da sein. Nun sorgfältig Maus an Entwickler Werkzeugbereich nehmen.

Answer 10

Die Umstellung auf Hover Status in Chrome ist ziemlich einfach, folgen Sie einfach diesen Schritten:

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

2) Wählen Sie das Element, das Sie haben wollen prüfen im DOM

3) Wählen Sie das Stift-Symbol (Toggle Element Zustand)

4) Dann kreuzen Sie das Hover

Nun können Sie den Hover-Zustand des ausgewählten siehe DOM im Browser!

Answer 11

In meinem Fall möchte ich dubug Bootstrap-Tooltip. Aber die Methoden, die oben nicht für mich arbeiten. Ich denke, Bootstrap implementiert dies durch so etwas wie Maus in / out-Ereignisse.

Wie auch immer, wenn ich schweben auf eine Schaltfläche, wird es ein Bruder html-Element unterhalb der Schaltfläche erzeugen, so dass ich auf die Schaltfläche des Elternelements in Registerkarte „Elemente“ von „Entwicklertools“ Fenster wählen, bewegen Sie den Knopf, und „Strg + C“, dann kann ich den Quellcode Paste, die den erzeugten Code enthält. Zuletzt den generierten Code finden, und sie die „Bearbeiten als HTML“ in Registerkarte „Elementen“ Quellcode einfügen.

Hope es jemand helfen kann.

Answer 12

Ich denke, das ist kein Thema mehr in Chrome, aber nur für den Fall. Ich schrieb diesen jQuery Skript das DOM zu inspizieren, wenn ich um mit der TAB-Taste bewegen.

Wenn zum Gebrauch ‚Mouseover‘ geändert, würde wie folgt aussehen:

$("body *").on('mouseover', function(event) {       
    console.log(event.target);      
    inspect(event.target);
    event.stopPropagation();
});

Sie können es leicht modifizieren, um die Ereignishandler zu entfernen, wenn Sie etwas auf ein Element klicken oder tun Sie beenden möchten.