Ein Schwebeelement „inspizieren“?

100

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"?

OJFord
quelle
2
In solchen Situationen verwende ich normalerweise die Konsole, um eine vorübergehende Änderung an der Seite vorzunehmen, z. B. das Entfernen des mouseleaveEreignisses aus dem übergeordneten Menü. Das Untermenü sollte dann auch dann geöffnet bleiben, wenn Sie die Maus aus dem übergeordneten Menü entfernen.
jbabey
Chrome unterstützt dies jetzt. Wählen Sie das UI-Element (z. B. ein Tag)> Inspect Element> Styles Tab. Neben dem Filterfeld befindet sich ein Abschnitt ": hov". Klick es. Jetzt können Sie das Kontrollkästchen Hover aktivieren und sehen, welche Stile beim Hover geladen werden.
Dhanuka777

Antworten:

69

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.

Geben Sie hier die Bildbeschreibung ein

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.

Geben Sie hier die Bildbeschreibung ein

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.

gmo
quelle
4
Ihre erste Lösung ist eine gute Problemumgehung, und ich habe eine Möglichkeit, sie zu verbessern: Klicken Sie mit der rechten Maustaste auf das schwebende Element, bewegen Sie die Maus vollständig in die "Inspektorzone", navigieren Sie mit den Tastaturtasten und drücken Sie die Eingabetaste auf "Inspektionselement" ". Das Element bleibt schwebend. Was Ihre zweite Lösung betrifft, ja, das (oder die Verwendung der Kontextmenüs :hover) hätte natürlich die richtige Lösung sein sollen, aber leider hat dies unter Chrome / Firefox so lange nicht funktioniert, wie ich mich erinnern kann ...
Gilad Barner
Ich war es gewohnt, dies unter Windows zu tun, aber unter Mac funktioniert dieser Trick nicht. Hat jemand auf einem Mac einen Weg dazu gefunden? es scheint, dass es Mausbewegungsereignisse an das Fenster "kommuniziert", selbst wenn sich die Maus im Inspektor oder im Untermenü befindet
santiago arizti
@ GiladBarner Danke für deine angebotene Verknüpfung, es hat bei mir funktioniert. Ich weiß nicht, ob dies nur ein Problem auf meinem PC ist oder nicht, aber ich kann die über die Tastatur ausgewählte Menüoption nicht sehen und die Tastenkombination (Strg-Umschalt-I) funktioniert nicht, solange das Dropdown-Menü sichtbar ist Da das Inspect-Element die letzte Option in der Dropdown-Liste ist, habe ich die Aufwärtspfeiltaste verwendet, um zum letzten Element zu wechseln und die Eingabetaste zu drücken, und es hat funktioniert.
Bill Hileman
Scheint im Moment die :hoverOption ist in Toggle Classes Option
Sagnik Pradhan
150

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.

    Unterbrechen Sie die Skriptausführung

  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.
mxxk
quelle
3
Die anderen hier angebotenen Methoden funktionieren in vielen Kontexten nicht, in denen dies der Fall ist.
Ed Staub
Perfekt. Aus irgendeinem Grund hat F8 nicht funktioniert, bevor ich diesen Beitrag gefunden habe. Jetzt habe ich es auf derselben Seite, die ich diagnostiziere, erneut versucht, und es hat funktioniert. (cwl)
Drew
2
Genial. Ich denke, das ist der beste Weg.
Varun Mehta
1
für Safari ist es Debuggertab
user2661518
6
Bei mir hat es nicht funktioniert. Danach F8friert der Bildschirm ein und kann keine Elemente auswählen. Meine Problemumgehung besteht darin, zu drücken F8, auf die ElementsRegisterkarte zu wechseln und dann nach den Wörtern zu suchen, die sich auf dem Hover-Element befinden.
AngryHacker
32

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

Geben Sie hier die Bildbeschreibung ein

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. :) :)

Woppi
quelle
5
Genie :). Dies ermöglicht die Überprüfung von Schwebeflügen, die durch Javascript aufgedeckt wurden.
ElwoodP
1
schön, es hat besser funktioniert als die ursprüngliche Antwort auf mich.
Victor
14

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

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

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

Pixelerd
quelle
7

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.

Josh
quelle
4

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.

Menü in Chrom öffnen Öffnen Sie das gleiche Menü in Firefox

Screenshots von Firefox 55 und Chrom 61.

MayeulC
quelle
2

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!

Dan Haddock
quelle
Dies war der beste Weg für Chrom!
Schneebesen
1
Großartig, war meine Antwort hilfreich für Sie?
Dan Haddock
0

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

Woody
quelle
Ach komm schon, ich habe es ausdrücklich gesagt, ohne eine solche Änderung vorzunehmen.
OJFord
Sie sagten, es bleibt nicht "nach der Aktivierung aufgetaucht". Ich schlage vor, alle Aktivierungsauslöser zu entfernen, damit es immer sichtbar ist. Auf diese Weise mache ich alle Popup-Menüs, sonst ist es eine Welt voller Schmerzen. aber schlag dich raus :)
Woody
0

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;
});
  1. 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).

Geben Sie hier die Bildbeschreibung ein

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.

tddrmllr
quelle