it-swarm.com.de

Siehe: Schwebezustand in Chrome Developer Tools

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

822
Ben

Jetzt können Sie die Regeln der Pseudo-Klasse anzeigen und sie für Elemente erzwingen.

Um die Regeln wie :hover im Stilfenster anzuzeigen, klicken Sie oben rechts auf den kleinen Text :hov.

Toggle element state

Um ein Element in den Status :hover zu versetzen, klicken Sie mit der rechten Maustaste darauf.

Force element state

Zusätzliche Tipps zum Elementbedienfeld in Chrome Developer Tools-Verknüpfungen .

1197

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

  • Klicken Sie mit der rechten Maustaste auf das Element, bewegen Sie den Mauszeiger jedoch NICHT vom Element weg, sondern halten Sie ihn im Schwebezustand.
  • Wählen Sie das Inspektionselement über die Tastatur aus (siehe Pfeil nach oben) und drücken Sie die Eingabetaste.
  • In den Entwicklertools unter Übereinstimmende CSS-Regeln sollte Folgendes zu sehen sein: Schweben.

PS: Ich habe es an einem Ihrer Fragen-Tags versucht.

53
Babiker

Ich wollte den Schwebezustand in meinen Bootstrap Tooltips sehen. Das Erzwingen des: hover-Status 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');

Forcing hover or mouseenter for Bootstrap Tooltips

28
k0pernikus

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

Methode 01

enter image description here

Methode 02

enter image description here

Mit Firefox Default Developer Toll

enter image description here

Mit Firebug

enter image description here

15
Santosh Khalse

Falls es hilft, scheint dies in der neuesten Version von Chrome (47.0.2526.106) einfacher zu sein:

Untersuche 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 den gewünschten Elementstatus aus dieser Dropdown-Liste:
this dropdown

8
Ianp

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


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


(Stand dieses Beitrags) Current Stable channel version is 8.0.552.224.

Sie können Ihre Stable-Channel Installation von Google Chrome durch Beta-Channel oder Dev-Channel ersetzen (siehe Early Access Release Channels ).

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

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

4
Bryan Field

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

Undock Chrome Developer Tools

Dann gehen Sie wie folgt vor:

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

Hover on 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: Bewegen Sie den Mauszeiger über das CSS.

Prost!

3
rmartrenado

Ich habe einen Menü-Status hover mit Chrome debuggt und dies getan, um den Schwebezustandscode zu sehen:

Klicken Sie im Bereich Elements auf die Schaltfläche Toggle Element state und wählen Sie :hover aus.

Gehen Sie im Bereich Scripts zu Event Listeners Breakpoints im rechten unteren Bereich und wählen Sie Mouse -> mouseup aus.

Untersuchen Sie nun das Menü und wählen Sie das gewünschte Feld aus. Wenn Sie die Maustaste loslassen, sollte sie anhalten und den Schwebezustand des ausgewählten Elements im Bedienfeld Elements anzeigen (siehe Abschnitt Styles).

2

In meinem Fall möchte ich den Tooltip bootstrap überspielen. Aber die oben genannten Methoden funktionieren bei mir nicht. Ich schätze, bootstrap hat dies durch ein Mouse-In/Out-Ereignis implementiert.

Wie auch immer, wenn ich mit der Maus über eine Schaltfläche schwebe, wird ein Bruder-HTML-Element unter der Schaltfläche generiert. Daher wähle ich das übergeordnete Element der Schaltfläche auf der Registerkarte "Elemente" des Fensters "Entwickler-Tools" aus, schwebe mit der Maus über die Schaltfläche und drücke auf "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 über "Als HTML bearbeiten" auf der Registerkarte "Elemente" zum Quellcode hinzu.

Hoffe es kann jemandem helfen.

1
Sean Song

Ich konnte den Stil anhand der folgenden von Babiker vorgeschlagenen Schritte erkennen: "Klicken Sie mit der rechten Maustaste auf das Element, bewegen Sie den Mauszeiger jedoch NICHT vom Element weg, sondern halten Sie ihn im Schwebezustand. Wählen Sie Element über die Tastatur untersuchen, 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 Hover-Bildschirm wird weiterhin angezeigt. Fahren Sie nun vorsichtig mit der Maus zum Entwickler-Tool-Bereich.

1
Ram

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

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

enter image description here

2) Wählen Sie das zu prüfende Element im Feld DOM aus.

enter image description here

3) Wählen Sie das Stecknadelsymbol enter image description here (Elementstatus umschalten)

4) Dann kreuzen Sie den Schwebeflug an

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

1
Alireza

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

Wenn "mouseover" geändert wird, sieht das so aus:

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

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

0
davidmontoyago