Ich möchte den :hover
Stil 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
Antworten:
Jetzt können Sie beide Pseudoklassenregeln sehen und sie den Elementen aufzwingen.
:hover
Klicken Sie auf den kleinen:hov
Text oben rechts, um die Regeln wie im Bereich "Stile" anzuzeigen .Um ein Element in den
:hover
Status zu zwingen , klicken Sie mit der rechten Maustaste darauf und wählen Sie:hover
.Zusätzliche Tipps zum Elementfenster in den Verknüpfungen zu Chrome Developer Tools .
quelle
<a>
Elemente) erzwingen .EDIT: Diese Antwort war vor der Fehlerbehebung, siehe die Antwort von tnothcutt.
Das war ein bisschen schwierig, aber hier ist:PS: Ich habe dies an einem Ihrer Frage-Tags versucht.
quelle
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:
quelle
Es gibt verschiedene Möglichkeiten, HOVER STATE- Stile in den Chrome Developer Tools anzuzeigen .
Methode 01
Methode 02
Mit Firefox Default Developer Toll
Mit Firebug
quelle
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:
Wählen Sie dann den gewünschten Elementstatus aus dieser Dropdown-Liste:
quelle
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)
(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 .
quelle
Ich weiß, dass das, was ich mache, die Problemumgehung ist, aber es funktioniert perfekt und so mache ich es jedes Mal.
Gehen Sie dann folgendermaßen vor:
Prost!
quelle
Ich habe ein Menü debuggt
hover
mit Chrome debuggt und dies getan, um den Schwebestatuscode anzeigen zu können:Elements
Klicken Sie im Bedienfeld auf dieToggle Element state
Schaltfläche und wählen Sie:hover
.In der
Scripts
Platte gehtEvent Listeners Breakpoints
im 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
Elements
Bedienfeld anzeigen (sieheStyles
Abschnitt).quelle
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
2) Wählen Sie das Element aus, das Sie im DOM prüfen lassen möchten
3) Wählen Sie das Pin-Symbol (Elementstatus umschalten)
4) Dann kreuzen Sie den Schwebeflug an
Jetzt können Sie den Schwebezustand des ausgewählten DOM im Browser sehen!
quelle
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.
quelle
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.
quelle
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:
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.
quelle