Ein Schwebeelement „inspizieren“?

Hinweis: Ich habe ähnliche Themen gelesen, aber keines ist mein Problem - ich kann mit der rechten Maustaste darauf klicken, es verschwindet einfach.

Ich finde "Inspect Element" ein unschätzbares Werkzeug in Chrome. Bei meinem letzten Versuch, die vielen von Ihnen bereits zu beherrschen, habe ich jedoch ein Untermenü für ein Element in meiner Navigationsleiste erstellt, das beim Bewegen des Mauszeigers unten angezeigt wird Eltern Artikel.

Das Popup (oder Down) ist nicht ganz so gestaltet, wie ich es gerne hätte, also klicke ich mit der rechten Maustaste auf> Element inspizieren, um zu sehen, was genau von wo kommt, und bekomme eine bessere Vorstellung davon, wie ich meinen gewünschten Effekt erzielen kann.

Sobald ich jedoch meine Maus vom Menü entferne, ist sie verschwunden.

Daher kann ich im Inspektionsbereich nicht verschiedene Elemente auswählen und sehen, welcher Bereich gleichzeitig hervorgehoben ist.

Gibt es einen Weg, dies zu umgehen, ohne das Menü so zu ändern, dass es nach der Aktivierung "auftaucht"?

Wenn der hoverEffekt mit CSSdann ja gegeben ist, verwende ich normalerweise zwei Optionen, um dies zu erhalten:

Eins, zu seeder , hover effectwenn die Maus verlassen das hover area:
Öffnen Sie den Inspektor in dockt Fenster und erhöhen die Breite bis zu erreichen Ihr HTML elementdann mit der rechten Maustaste und das Popup - Menü muss der Inspektor Zone zu Ende sein ... dann , wenn Sie mit der Maus über den Inspektor Ansicht , die hover effectim Dokument aktiviert bleiben.

Zwei, auf keepdas hover effectselbst dann , wenn sich der Mauszeiger nicht über die HTML element, den Inspektor öffnen, gehen Sie auf Styles TABund klicken Sie in der oberen rechten Symbol , das sagt Toggle Element State... (gepunktetes Rechteck mit einem Pfeil) Es können Sie manuell aktivieren die Hover Event(unter anderem) mit der Kontrollkästchen zur Verfügung gestellt.

Wenn es überhaupt nicht klar ist, lass es mich wissen und ich kann ein paar Screenshots hinzufügen. Bearbeitet : Screenshot hinzugefügt.

Und schließlich und wie ich zu Beginn sage, kann ich dies nur tun, wenn das hovermit CSS:HOVER... eingestellt ist, wenn Sie das hover statemit steuern jQuery.onMouseOver, funktioniert zum Beispiel nur (manchmal) die Methode Eins.

Ich hoffe es hilft.

Wenn der Hover von JS ausgelöst wird, unterbrechen Sie einfach die Skriptausführung über die Tastatur. Dies ist eine viel einfachere Methode, das DOM einzufrieren, als die anderen Antworten vermuten lassen.

So geht's in Chrome. Ich bin sicher, dass Firefox ein gleichwertiges Verfahren hat:

1. Öffnen Sie die Entwicklertools und gehen Sie zu Quellen.

2. Beachten Sie die Verknüpfung zum Anhalten der Skriptausführung F8.

   

3. Interagieren Sie mit der Benutzeroberfläche, damit das Element angezeigt wird.

4. Hit F8.
5. Jetzt können Sie Ihre Maus bewegen, das DOM überprüfen, was auch immer. Das Element bleibt dort.

Was für mich funktioniert hat, ist die Auswahl des spezifischen Tags, das ich überprüfen wollte, und dies:

Nachdem ich das oben genannte getan habe, würde ich normalerweise wieder ein Tag auswählen, dann bleibt das Dropdown automatisch unverändert, selbst wenn ich mit dem Mauszeiger zu anderen Stellen wie Inspect Element usw. fahre.

Sie können den Browser einfach aktualisieren, wenn Sie die Dropdown-Elemente des Menüs überprüfen, um zum normalen Status zurückzukehren.

Hoffe das hilft. :) :)

Sie können dies auch in der Javascript-Konsole tun:

$('#foo').trigger('mouseover');

Ein, das das Element im "Hover" -Zustand "einfriert".

So mache ich es ohne CSS-Änderungen oder JS-Pause in Chrome (ich bin auf einem Mac und habe keinen PC vor mir, wenn Sie unter Win laufen):

1. Öffnen Sie Ihre Entwicklerkonsole.
2. Aktivieren Sie das Hover-Inspektionswerkzeug noch nicht, sondern öffnen Sie das gewünschte Untermenü, indem Sie mit der Maus darüber fahren.
3. drücke Command+ Shift+ C(Mac) oder Ctrl+ Shift+ C(Win / Linux)

Jetzt wird das Hover-Inspektionswerkzeug auf die Elemente angewendet, die Sie in Ihrem Sub-Navi geöffnet haben.

Ich bin mir nicht sicher, ob es in früheren Browser-Revisionen vorhanden war, aber ich habe gerade diese äußerst einfache Methode herausgefunden.

Öffnen Sie den Inspektor in Chrome oder Firefox, klicken Sie mit der rechten Maustaste auf das gewünschte Element und wählen Sie die entsprechende Option aus (in diesem Fall: Hover). Dies löst das zugehörige CSS aus.

Screenshots von Firefox 55 und Chrom 61.

Ausgezeichnetes Zeug!

Vielen Dank an gmo für diesen Rat. Ich wusste nicht, dass diese Attributeinstellungen sehr hilfreich sind.

Als kleine Überarbeitung des Wortlauts würde ich diesen Prozess wie folgt erklären:

• Klicken Sie mit der rechten Maustaste auf das Element, das Sie formatieren möchten

  • Öffnen Sie das Inspektionswerkzeug

  • Navigieren Sie auf der rechten Seite zur kleinen Registerkarte "Stile"

  • Gefunden über dem Inhalt des CSS-Stylesheets

  • Wählen Sie die Option .hov - Hier erhalten Sie alle verfügbaren Einstellungen für das ausgewählte HTML-Element

  • Klicken Sie auf und ändern Sie alle Optionen, um inaktiv zu sein

  • Wählen Sie nun den Status aus, den Sie optimieren möchten. Wenn Sie einen dieser Status aktivieren, springt Ihr Stylesheet direkt zu den folgenden Einstellungen:

Stile - Filter optimieren - Interaktive Elemente

Diese Information war ein Lebensretter für mich, kann nicht glauben, dass ich gerade davon gehört habe!

Ändern Sie das CSS so, dass die Eigenschaft, die das Menü verbirgt, nicht angewendet wird, während Sie daran arbeiten.

Ich musste dies tun, aber das Element, das ich untersuchen wollte, wurde basierend auf dem Schwebezustand eines anderen Elements dynamisch hinzugefügt und entfernt. Meine Lösung ähnelt dieser , aber das hat bei mir nicht ganz funktioniert.

Also hier ist was ich getan habe:

1. Fügen Sie ein einfaches Skript hinzu, um den Debugger-Modus mouseoverfür das Element aufzurufen, das das Hover-Ereignis auslöst, über das Sie sich Sorgen machen.

$(document).on('mouseover', '[your-hover-element-selector]', function(e) {
  debugger;
});

2. Bewegen Sie den Mauszeiger bei geöffneter Entwicklerkonsole in Chrome über Ihr Element, und Sie gelangen in den Debugger-Modus. Navigieren Sie zum Abschnitt "Quellen" der Entwicklertools und klicken Sie auf die Schaltfläche "Skriptausführung fortsetzen" (die blaue Schaltfläche "Wiedergabe ähnlich" unten).

Sobald Sie dies tun, wird Ihr DOM im Schwebezustand angehalten, und Sie können den Elementinspektor verwenden, um alle Elemente zu untersuchen, wie sie in diesem Zustand vorhanden sind.