Frage Siehe: Hover-Status in den Chrome-Entwicklertools


Ich möchte das sehen :hover Stil für einen Anker, den ich in Chrome schwebe. In Firebug gibt es ein Stil-Dropdown, mit dem ich verschiedene Zustände für ein Element auswählen kann. Ich kann nichts Ähnliches in Chrome finden. Fehle ich etwas?


751
2017-12-23 01:16


Ursprung


Antworten:


Jetzt können Sie beide pseudo-class-Regeln sehen und sie für Elemente erzwingen.

Um die Regeln zu sehen :hover Klicken Sie im Bereich "Stile" auf das kleine :hov Text oben rechts.

Toggle element state

Ein Element erzwingen :hover Klicken Sie mit der rechten Maustaste darauf.

Force element state

Weitere Tipps zum Thema Elemente Panel im Chrome Developer Tools-Verknüpfungen.


1091
2017-07-21 15:25



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

Das war ein bisschen schwierig, aber hier geht es:

  • 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 inspect Element über die Tastatur, wie in Schlag-Pfeil und dann Enter-Taste.
  • In den Entwicklertools unter Matched CSS Rules sehen Sie: hover.

PS: Ich habe das auf einem deiner Frage-Tags versucht.


51
2017-12-23 01:47



Ich wollte den Hover-Status in meinen Bootstrap-Tooltips sehen. Beim Erzwingen des Status ":: hover" in den Chrome-Entwicklertools wurde die erforderliche Ausgabe nicht erstellt. Das Auslösen des Ereignisses "mouseenter" über die Konsole führte jedoch in Chrome dazu. Wenn jQuery auf der Seite vorhanden ist, können Sie Folgendes ausführen:

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

Forcing hover or mouseenter for Bootstrap Tooltips


21
2017-12-23 15:25



Es gibt mehrere Möglichkeiten zu sehen HOVER-ZUSTAND Stile in den Chrome-Entwicklertools.

Methode 01

enter image description here

Methode 02

enter image description here

Mit Firefox Standard Entwickler Toll

enter image description here

Mit Firebug

enter image description here


9
2018-01-06 08:05



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

Inspiziere das Element und klicke dann auf die drei weißen Punkte in der linken Rinne:
click on the three white dots

Wählen Sie dann aus diesem Dropdown den gewünschten Elementstatus:
this dropdown


7
2018-01-04 19:22



Ich denke nicht, dass es einen Weg gibt, dies zu tun. ich habe eingereicht eine Funktionsanfrage. Wenn es einen Weg gibt, werden die Entwickler bei Google darauf hinweisen und ich werde meine Antwort bearbeiten. Wenn nicht, müssen wir warten und zusehen. (Sie können das Problem anzünden, um dafür zu stimmen)


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


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

Sie können Ihre ersetzen Stabiler Kanal Installation von Google Chrome mit dem Beta-Kanal oder der Dev-Kanal (Sehen Early Access Release-Kanäle).

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

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


4
2017-12-23 01:34



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

Undock Chrome Developer Tools

Dann gehe so vor:

  • Stellen Sie zuerst sicher, dass die Chrome-Entwicklertools nicht gekoppelt sind.
  • Bewegen Sie dann eine beliebige Seite des Dev Tools-Fensters in die Mitte des Elements, das Sie bei der Verwendung von hovered untersuchen möchten.

Hover on element

  • Schließlich, schweben Sie das Element, klicken Sie mit der rechten Maustaste und inspizieren Sie das Element, bewegen Sie Ihre Maus in das Dev Tools-Fenster und Sie können mit Ihrem Element spielen: hover css.

Prost!


3
2017-08-21 23:11



Ich habe ein Menü getestet hover State mit Chrome und tat dies, um den Hover-State-Code zu sehen:

In dem Elements Klicken Sie auf die Schaltfläche Toggle Element state Taste und wählen Sie :hover.

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

Inspiziere nun das Menü und wähle die gewünschte Box aus. Wenn Sie die Maustaste loslassen, sollte es anhalten und Sie zeigen den ausgewählten Hover-Status des Elements in der Elements Panel (siehe die Styles Sektion).


2
2017-07-22 15:05



Ich konnte den Stil sehen, indem ich die 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 es im Schwebezustand. Wählen Sie das Element über die Tastatur aus, wie im Aufwärtspfeil und dann die Eingabetaste."

Um den Stil zu ändern, folgen Sie den obigen Schritten und dann - Ändern Sie den Tab Ihres Browsers durch Drücken von Strg + TAB auf der Tastatur. Klicken Sie dann auf die Registerkarte, die Sie debuggen möchten. Ihr Hover-Bildschirm wird immer noch da sein. Nun vorsichtig mit der Maus zum Developer Tool Bereich.


1
2018-05-02 10:55



Wechseln zu schweben Status in Chrome ist ziemlich einfach, folge einfach diesen Schritten:

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

enter image description here

2) Wählen Sie das Element, das Sie untersuchen möchten, in der DOM

enter image description here

3) Wählen Sie das Pin-Symbol enter image description here  (Umschaltelementstatus)

4) Dann kreuzen Sie an schweben

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


1
2018-06-26 09:01



In meinem Fall möchte ich den Bootstrap-Tooltip dubingen. Aber die oben genannten Methoden funktionieren nicht für mich. Ich denke, Bootstrap implementiert dies durch etwas wie Maus ein / aus Ereignis.

Wie auch immer, wenn ich auf eine Schaltfläche schwinge, wird ein Bruder-HTML-Element unterhalb der Schaltfläche generiert, also wähle ich das übergeordnete Element der Schaltfläche auf der Registerkarte "Elemente" des Fensters "Entwicklerwerkzeuge", schwenke 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 hinzu, indem Sie im Tab "Elemente" die Option "Als HTML bearbeiten" wählen.

Ich hoffe, es kann jemandem helfen.


1
2018-01-30 08:58