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"?
mouseleave
Ereignisses aus dem übergeordneten Menü. Das Untermenü sollte dann auch dann geöffnet bleiben, wenn Sie die Maus aus dem übergeordneten Menü entfernen.Antworten:
Wenn der
hover
Effekt mitCSS
dann ja gegeben ist, verwende ich normalerweise zwei Optionen, um dies zu erhalten:Eins, zu
see
der ,hover effect
wenn die Maus verlassen dashover area
:Öffnen Sie den Inspektor in dockt Fenster und erhöhen die Breite bis zu erreichen Ihr
HTML element
dann 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 , diehover effect
im Dokument aktiviert bleiben.Zwei, auf
keep
dashover effect
selbst dann , wenn sich der Mauszeiger nicht über dieHTML element
, den Inspektor öffnen, gehen Sie aufStyles TAB
und klicken Sie in der oberen rechten Symbol , das sagtToggle Element State
... (gepunktetes Rechteck mit einem Pfeil) Es können Sie manuell aktivieren dieHover 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
hover
mitCSS:HOVER
... eingestellt ist, wenn Sie dashover state
mit steuernjQuery.onMouseOver
, funktioniert zum Beispiel nur (manchmal) die Methode Eins.Ich hoffe es hilft.
quelle
: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 ...:hover
Option ist in Toggle Classes OptionWenn 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:
Beachten Sie die Verknüpfung zum Anhalten der Skriptausführung F8.
Interagieren Sie mit der Benutzeroberfläche, damit das Element angezeigt wird.
quelle
Debugger
tabF8
friert der Bildschirm ein und kann keine Elemente auswählen. Meine Problemumgehung besteht darin, zu drückenF8
, auf dieElements
Registerkarte zu wechseln und dann nach den Wörtern zu suchen, die sich auf dem Hover-Element befinden.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. :) :)
quelle
Sie können dies auch in der Javascript-Konsole tun:
Ein, das das Element im "Hover" -Zustand "einfriert".
quelle
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):
Jetzt wird das Hover-Inspektionswerkzeug auf die Elemente angewendet, die Sie in Ihrem Sub-Navi geöffnet haben.
quelle
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.
quelle
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!
quelle
Ändern Sie das CSS so, dass die Eigenschaft, die das Menü verbirgt, nicht angewendet wird, während Sie daran arbeiten.
quelle
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:
mouseover
für das Element aufzurufen, das das Hover-Ereignis auslöst, über das Sie sich Sorgen machen.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.
quelle