Siehe: Schwebezustand in den Chrome Developer Tools

855

Ich möchte den :hoverStil für einen Anker sehen, auf dem ich in Chrome schwebe . In Firebug gibt es eine Dropdown-Liste mit Stilen, mit der ich verschiedene Status für ein Element auswählen kann.

Ich kann in Chrome anscheinend nichts Ähnliches finden. Vermisse ich etwas

Ben
quelle
Gute Frage, denn ich habe gesucht, wie man den Schwebestil
Chris Halcrow
1
Ich weiß, dass es keine vollständige / perfekte Lösung für das Problem ist, konnte aber in den Antworten keine Lösung finden, die für Mouseover-Ereignisse funktionieren würde. Mit Safari können Sie mit den Browser-Tools den Mauszeiger bewegen. Verwenden Sie daher nur für dieses Problem einen anderen Browser.
12.

Antworten:

1256

Jetzt können Sie beide Pseudoklassenregeln sehen und sie den Elementen aufzwingen.

:hoverKlicken Sie auf den kleinen :hovText oben rechts, um die Regeln wie im Bereich "Stile" anzuzeigen .

Elementstatus umschalten

Um ein Element in den :hoverStatus zu zwingen , klicken Sie mit der rechten Maustaste darauf und wählen Sie :hover.

Elementzustand erzwingen

Zusätzliche Tipps zum Elementfenster in den Verknüpfungen zu Chrome Developer Tools .

Travis Northcutt
quelle
3
Sie sind sich nicht sicher, wann sich dies geändert hat, aber Sie können jetzt mit der rechten Maustaste -> Elementstatus (aus dem Elementbereich) auf andere Elemente (nicht nur <a>Elemente) erzwingen .
Travis Northcutt
3
Dies funktioniert für CSS: Hover-Änderungen, jedoch nicht, wenn Sie Änderungen beim Hover mit JS vornehmen.
Matthew_360
Hier ist ein kurzes Video, das ich zusammengestellt habe, um den Schwebezustand
RoccoB
54

EDIT: Diese Antwort war vor der Fehlerbehebung, siehe die Antwort von tnothcutt.

Das war ein bisschen schwierig, aber hier ist:

  • Klicken Sie mit der rechten Maustaste auf das Element, aber bewegen Sie den Mauszeiger NICHT vom Element weg, sondern halten Sie ihn im Schwebezustand.
  • Wählen Sie das Element über die Tastatur prüfen, wie im Aufwärtspfeil und dann die Eingabetaste.
  • Schauen Sie in den Entwicklertools unter Übereinstimmende CSS-Regeln nach, Sie sollten sehen können: Hover.

PS: Ich habe dies an einem Ihrer Frage-Tags versucht.

Babiker
quelle
32

Ich wollte den Schwebezustand in meinen Bootstrap-Tooltips sehen. Das Erzwingen des Status: hover in Chrome dev Tools hat nicht die erforderliche Ausgabe erstellt, aber das Auslösen des Mouseenter-Ereignisses über die Konsole hat in Chrome den Trick ausgeführt. Wenn jQuery auf der Seite vorhanden ist, können Sie Folgendes ausführen:

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

Erzwingen von Hover oder Mouseenter für Bootstrap-Tooltips

k0pernikus
quelle
Dies ist die beste Antwort
Argun
20

Es gibt verschiedene Möglichkeiten, HOVER STATE- Stile in den Chrome Developer Tools anzuzeigen .

Methode 01

Geben Sie hier die Bildbeschreibung ein

Methode 02

Geben Sie hier die Bildbeschreibung ein

Mit Firefox Default Developer Toll

Geben Sie hier die Bildbeschreibung ein

Mit Firebug

Geben Sie hier die Bildbeschreibung ein

Santosh Khalse
quelle
9

Falls es hilft, scheint dies im neuesten Chrome (47.0.2526.106) einfacher zu sein:

Untersuchen Sie das Element und klicken Sie dann auf die drei weißen Punkte in der linken Rinne:
Klicken Sie auf die drei weißen Punkte

Wählen Sie dann den gewünschten Elementstatus aus dieser Dropdown-Liste:
diese Dropdown-Liste

Ianp
quelle
4

Ich glaube nicht, dass es einen Weg gibt, dies zu tun. Ich habe eine Feature-Anfrage eingereicht . Wenn es einen Weg gibt, werden die Entwickler bei Google sicher darauf hinweisen und ich werde meine Antwort bearbeiten. Wenn nicht, müssen wir abwarten und zuschauen. (Sie können das Thema markieren, um dafür zu stimmen)


Kommentar 1 von Chrome-Projektmitglied : In 10.0.620.0 werden im Bedienfeld „Stile“ die Hover-Stile für das ausgewählte Element angezeigt, jedoch nicht: Aktiv.


(Stand dieses Beitrags) Die aktuelle Version des stabilen Kanals ist 8.0.552.224.

Sie können Ihre stabile Kanalinstallation von Google Chrome durch den Beta-Kanal oder den Dev-Kanal ersetzen (siehe Early Access Release Channels ).

Sie können auch eine sekundäre Chrome-Installation installieren , die noch aktueller ist als der Dev-Kanal .

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

Bryan Field
quelle
Tolle Untersuchung. Ich rocke den neuesten Entwickler-Build (10.0.612.3), also warte ich ein bisschen und hoffe, ich sehe die: Hover-Güte!
Ben
4

Ich weiß, dass das, was ich mache, die Problemumgehung ist, aber es funktioniert perfekt und so mache ich es jedes Mal.

Undock Chrome Developer Tools

Gehen Sie dann folgendermaßen vor:

  • Stellen Sie zunächst sicher, dass die Chrome Developer Tools nicht angedockt 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 bewegen.

Bewegen Sie den Mauszeiger über das Element

  • Bewegen Sie zum Schluss den Mauszeiger über das Element, klicken Sie mit der rechten Maustaste und überprüfen Sie das Element. Bewegen Sie die Maus in das Dev Tools-Fenster, und Sie können mit Ihrem Element spielen: Hover CSS.

Prost!

rmartrenado
quelle
1
Ich werde einen Kommentar hinzufügen, damit ich ihn wieder finde, weil ich weiß, dass ich ihn brauchen werde! Besonders wichtig für unvorhersehbare UI-Plugins von Drittanbietern.
cfranklin
3

Ich habe ein Menü debuggt hover mit Chrome debuggt und dies getan, um den Schwebestatuscode anzeigen zu können:

ElementsKlicken Sie im Bedienfeld auf die Toggle Element stateSchaltfläche und wählen Sie:hover .

In der ScriptsPlatte geht Event Listeners Breakpointsim rechten unteren Bereich und wählen SieMouse -> mouseup .

Überprüfen Sie nun das Menü und wählen Sie das gewünschte Feld aus. Wenn Sie die Maustaste loslassen, sollte sie anhalten und Ihnen den Schwebezustand des ausgewählten Elements im ElementsBedienfeld anzeigen (siehe StylesAbschnitt).

Leniel Maccaferri
quelle
2

Das Ändern des Schwebestatus in Chrome ist ziemlich einfach. Führen Sie die folgenden Schritte aus:

1) Klicken Sie mit der rechten Maustaste auf Ihre Seite und wählen Sie Inspizieren

Geben Sie hier die Bildbeschreibung ein

2) Wählen Sie das Element aus, das Sie im DOM prüfen lassen möchten

Geben Sie hier die Bildbeschreibung ein

3) Wählen Sie das Pin-Symbol Geben Sie hier die Bildbeschreibung ein (Elementstatus umschalten)

4) Dann kreuzen Sie den Schwebeflug an

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

Alireza
quelle
1

Ich konnte den Stil sehen, indem ich die folgenden von Babiker vorgeschlagenen Schritte befolgte: "Klicken Sie mit der rechten Maustaste auf das Element, aber bewegen Sie den Mauszeiger NICHT vom Element weg, sondern halten Sie ihn im Schwebezustand. Wählen Sie das Element über die Tastatur überprüfen, wie in Pfeil nach oben und dann Eingabetaste. "

Befolgen Sie zum Ändern des Stils die obigen Schritte und dann - Ändern Sie die Registerkarte Ihres Browsers, indem Sie Strg + TAB auf der Tastatur drücken. Klicken Sie dann wieder auf die Registerkarte, die Sie debuggen möchten. Ihr Schwebebildschirm wird weiterhin angezeigt. Fahren Sie nun vorsichtig mit der Maus zum Entwickler-Tool-Bereich.

RAM
quelle
1
Sie müssen Ihre Maus nicht im
Schwebezustand
1

In meinem Fall möchte ich den Bootstrap-Tooltip synchronisieren. Aber die oben genannten Methoden funktionieren bei mir nicht. Ich denke, Bootstrap hat dies durch so etwas wie ein Maus-In / Out-Ereignis implementiert.

Wenn ich mit der Maus über eine Schaltfläche fahre, wird unter der Schaltfläche ein Bruder-HTML-Element generiert. Wählen Sie daher das übergeordnete Element der Schaltfläche auf der Registerkarte "Elemente" des Fensters "Entwicklertools" aus, bewegen Sie den Mauszeiger über die Schaltfläche und "Strg + C". dann kann ich den Quellcode einfügen, der den generierten Code enthält. Suchen Sie zuletzt den generierten Code und fügen Sie ihn dem Quellcode durch "Als HTML bearbeiten" auf der Registerkarte "Elemente" hinzu.

Hoffe es kann jemandem helfen.

Sean Song
quelle
0

Ich denke, dies ist in Chrome kein Problem mehr, sondern nur für den Fall. Ich habe dieses jQuery- Skript geschrieben , um das DOM zu überprüfen, wenn ich mich mit der TAB-Taste bewege.

Wenn geändert, um 'mouseover' zu verwenden, würde dies folgendermaßen aussehen:

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

Sie können es einfach ändern, um den Ereignishandler zu entfernen, wenn Sie auf ein Element klicken oder etwas tun, bei dem Sie anhalten möchten.

davidmontoyago
quelle