"Ispezionare" un elemento al passaggio del mouse?

Nota: ho letto thread simili, ma nessuno è un mio problema: posso fare clic con il pulsante destro del mouse su di esso bene, solo allora scompare.

Trovo "Inspect Element" uno strumento inestimabile in Chrome, tuttavia la mia ultima incursione mentre imparo i modi magici in cui molti di voi già possiedono mi ha visto creare un sottomenu per un elemento sulla mia barra di navigazione, che si apre sotto al passaggio del mouse articolo principale.

Il popup (o verso il basso) non è esattamente disegnato come vorrei, quindi faccio clic con il pulsante destro del mouse su> ispeziona l'elemento per vedere cosa proviene da dove esattamente e ho un'idea migliore di come ottenere l'effetto desiderato.

Tuttavia, non appena sposto il mouse lontano dal menu, non c'è più.

Quindi non posso selezionare diversi elementi nel riquadro di ispezione e vedere quale area è evidenziata allo stesso tempo.

C'è un modo per aggirare questo, senza cambiare il menu in modo che rimanga "saltato fuori" una volta attivato?

Se l' hovereffetto viene fornito con CSSsì, normalmente utilizzo due opzioni per ottenerlo:

Uno, per seeil hover effectquando il mouse lasciare il hover area:
Aprire la finestra di ispezione nella finestra ancorata e aumentare la larghezza fino a raggiungere la vostra HTML element, quindi fare clic destro e il menu a comparsa deve essere sopra la zona ispettore ... poi, quando si sposta il mouse sopra la vista ispettore , la hover effectconservazione attivata nel documento.

Due, per keepla hover effectanche se il mouse non è sopra il HTML element, aprire le impostazioni, andare a Styles TABe fare clic l'icona in alto a destra che dice Toggle Element State... (rettangolo punteggiato con una freccia) Ci si può attivare manualmente la Hover Event(tra gli altri) con il casella di controllo fornita.

Se non è del tutto chiaro, fammelo sapere e posso aggiungere alcuni screenshot. Modificato : screenshot aggiunto.

E infine, come ho detto all'inizio, posso farlo solo se hoverè impostato con CSS:HOVER... quando controlli hover statecon, jQuery.onMouseOverad esempio, funziona solo (a volte), il metodo Uno.

Spero che sia d'aiuto.

Se il passaggio del mouse viene attivato da JS, metti in pausa l'esecuzione dello script tramite la tastiera. Questo è un modo molto più semplice di congelare il DOM rispetto a quanto suggeriscono le altre risposte.

Ecco come lo fai in Chrome. Sono sicuro che Firefox ha una procedura equivalente:

1. Apri gli Strumenti per sviluppatori e vai su Fonti.

2. Notare la scorciatoia per sospendere l'esecuzione dello script— F8.

   

3. Interagisci con l'interfaccia utente per far apparire l'elemento.

4. Hit F8.
5. Ora puoi spostare il mouse, ispezionare il DOM, qualunque cosa. L'elemento rimarrà lì.

Quello che ha funzionato per me è stato selezionare il tag specifico che volevo ispezionare e fare questo:

Dopo aver eseguito quanto sopra, selezionerei di nuovo normalmente un tag, quindi il menu a discesa rimarrà automaticamente così com'è anche quando passo il mouse su altri luoghi come Inspect Element, ecc.

Puoi semplicemente aggiornare il browser durante l'ispezione degli elementi del menu a discesa per tornare allo stato normale.

Spero che questo ti aiuti. :)

Puoi farlo anche nella console javascript:

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

Un che "congelerà" l'elemento nello stato "hover".

Ecco come lo faccio senza modifiche CSS o JS in pausa in Chrome (sono su un Mac e non ho un PC davanti a me se stai utilizzando Win):

1. tieni aperta la tua console per sviluppatori.
2. non abilitare ancora lo strumento di ispezione al passaggio del mouse, ma apri invece il sottomenu desiderato spostandoci sopra il mouse.
3. premi Command+ Shift+ C(Mac) o Ctrl+ Shift+ C(Win / Linux)

ora lo strumento di ispezione al passaggio del mouse si applicherà agli elementi che hai aperto nel tuo sub-nav.

Non sono sicuro che fosse presente nelle precedenti revisioni del browser, ma ho appena scoperto questo metodo estremamente semplice.

Apri l'ispettore in Chrome o Firefox, fai clic con il pulsante destro del mouse sull'elemento che ti interessa e seleziona l'opzione appropriata (in questo caso: hover). Questo attiverà il CSS associato.

Screenshot di Firefox 55 e chromium 61.

Roba eccellente!

Grazie a OGM per questo consiglio. Non sapevo che quelle impostazioni degli attributi fossero di enorme aiuto.

Come piccola revisione della formulazione, spiegherei questo processo come segue:

• Fare clic con il pulsante destro del mouse sull'elemento a cui si desidera applicare lo stile

  • Apri lo strumento "Ispeziona"

  • Sul lato destro, vai alla piccola scheda Stili

  • Trovato sopra il contenuto del foglio di stile CSS

  • Seleziona l'opzione .hov - Questo ti darà tutte le impostazioni disponibili per l'elemento HTML selezionato

  • Fare clic su e modificare tutte le opzioni per essere inattive

  • Ora seleziona lo stato che desideri modificare: all'attivazione di uno di questi, il tuo foglio di stile ti porterà direttamente a quelle impostazioni:

Stili - Modifica dei filtri - Elementi interattivi

Questa informazione è stata un salvavita per me, non posso credere di averne appena sentito parlare!

cambia il CSS in modo che la proprietà che nasconde il menu non venga applicata mentre ci lavori è quello che faccio io.

Avevo bisogno di farlo, ma l'elemento che stavo cercando di ispezionare è stato aggiunto e rimosso dinamicamente in base allo stato al passaggio del mouse di un altro elemento. La mia soluzione è simile a questa , ma non ha funzionato per me.

Quindi ecco cosa ho fatto:

1. Aggiungi un semplice script per accedere alla modalità debugger mouseoversull'elemento che attiva l'evento hover che ti preoccupa.

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

2. Quindi, con la console di sviluppo aperta in Chrome, passa il mouse sul tuo elemento e accederai alla modalità debugger. Passa alla sezione delle fonti degli strumenti di sviluppo e fai clic sul pulsante "Riprendi l'esecuzione dello script" (il pulsante blu simile alla riproduzione sotto).

Una volta che lo fai, il tuo DOM verrà messo in pausa nello stato al passaggio del mouse e puoi utilizzare l'ispettore degli elementi per ispezionare tutti gli elementi così come esistono in quello stato.