Vedi: stato hover in Chrome Developer Tools

Question

voglio vedere lo stile :hover per un'ancora sto in bilico in Chrome. In Firebug, c'è una discesa stile che mi permette di selezionare diversi stati per un elemento. Io non riesco a trovare qualcosa di simile a Chrome. Mi sto perdendo qualcosa?

Answer 1

Ora è possibile vedere sia le regole pseudo-classi e costringerli su elementi.

Per vedere le regole come :hover nel pannello Stili fare clic sul testo di piccole dimensioni :hov in alto a destra.

Per forzare un elemento in stato di :hover, a destra clic su di esso.

Ulteriori consigli sul pannello elementi in Chrome Developer Tools Shortcuts .

Answer 2

EDIT: Questa risposta è stata prima della correzione del bug, vedere la risposta di tnothcutt

Questo è stato un po 'complicato, ma qui va:.

• elemento pulsante destro del mouse, ma non si muovono il puntatore del mouse lontano dalla griglia, mantenerlo in stato hover.
• Scegli ispezionare elemento tramite tastiera, come nel colpo freccia su e poi il tasto Invio.
• Cerca in strumenti di sviluppo sotto regole CSS abbinate, si dovrebbe essere in grado di vedere:. Hover

PS: ho provato questo su uno dei tag domanda

.

Answer 3

Ho voluto vedere lo stato hover sul mio tooltip Bootstrap. Forzare il la: stato hover in Chrome strumenti di sviluppo non ha creato l'output richiesto, ma innescando l'evento MouseEnter via console ha fatto il trucco in Chrome. Se jQuery esiste sulla pagina è possibile eseguire:

$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');

Answer 4

Ci sono diversi modi di vedere HOVER STATO gli stili in Chrome Developer Tools.

Metodo 01

Metodo 02

Con Firefox predefinito Developer Toll

Con Firebug

Answer 5

In caso aiuta, questo sembra essere più facile nel più recente Chrome (47.0.2526.106):

Ispezionare elemento e quindi fare clic sui tre puntini bianchi nella grondaia sinistra:

Quindi scegliere lo stato elemento desiderato da questo menu a discesa:

Answer 6

Non credo ci sia un modo per fare questo. Ho presentato una richiesta di funzionalità . Se c'è un modo, gli sviluppatori di Google saranno burbero farlo notare e io modificare la mia risposta. In caso contrario, dovremo aspettare e vedere. (È possibile classificare il problema di votare per esso)

---

Commento 1 da Chrome membro del progetto : In 10.0.620.0, gli spettacoli del pannello stili gli stili: hover per l'elemento selezionato, ma non:. attivi

---

(come di questo post) corrente versione stabile canale è 8.0.552.224.

È possibile sostituire il vostro canale stabile installazione di Google Chrome con il canale Beta o il Dev channel (Vedere Early Access Stampa Canali ).

Si può anche installare un installazione secondaria di Chrome che è ancora più aggiornata rispetto al canale Dev .

... La build Canary viene aggiornato anche più frequentemente rispetto al canale Dev e non è testato prima di essere rilasciato. Perché la build Canary può a volte essere inutilizzabile, non può essere impostato come browser predefinito e può essere installato in aggiunta a qualsiasi dei canali di Google Chrome di cui sopra. ...

Answer 7

Lo so che quello che faccio è proprio la soluzione, ma funziona perfettamente e questo è il modo in cui lo faccio ogni volta.

Quindi, procedere in questo modo:

• Prima di tutto assicuratevi Chrome Developer Tools è sganciato.
• Quindi, basta spostare qualsiasi lato della finestra Dev Tools per mezzo dell'elemento che si desidera esaminare mentre aleggiava.

• Infine, l'elemento hover, tasto destro e ispezionare elemento, spostare il mouse nella finestra Dev Tools e si sarà in grado di giocare con il vostro elemento:. Hover css

Cheers!

Answer 8

Mi è stato il debug di uno stato di menù hover con Chrome e mi ha fatto questo per essere in grado di vedere il codice stato hover:

Nel pannello Elements clic su pulsante Toggle Element state e selezionare :hover.

Nel pannello Scripts Vai Event Listeners Breakpoints nella sezione in basso a destra e selezionare Mouse -> mouseup.

Ora ispezionare il menu e selezionare la casella che si desidera. Quando si rilascia il pulsante del mouse dovrebbe fermarsi e vi mostrerà lo stato elemento hover selezionato nel pannello Elements (un'occhiata alla sezione Styles).

Answer 9

ho potuto vedere lo stile seguendo i passaggi qui sotto suggeriti dal Babiker - "Elemento pulsante destro del mouse, ma non spostare il puntatore del mouse lontano dalla griglia, mantenerlo in stato hover. Scegli ispezionare elemento tramite tastiera, come nel colpo freccia su e poi il tasto Invio."

Per cambiare follow stile sopra gradini e poi - Cambiare la scheda del browser premendo CTRL + TAB sulla tastiera. Quindi fare clic di nuovo sulla scheda che si desidera eseguire il debug. Lo schermo hover sarà ancora lì. Ora prendete con attenzione il vostro mouse per zona strumento di sviluppo.

Answer 10

La modifica a hover stato in Chrome è abbastanza facile, basta seguire questi passaggi di seguito:

1) Fare clic destro nella tua pagina e selezionare ispezionare

2) Selezionare l'elemento che si desidera avere ispezionare nella DOM

3) Selezionare l'icona del perno (Toggle Element stato)

4) Poi spuntare la hover

Ora è possibile vedere lo stato presso il selezionato DOM nel browser!

Answer 11

Nel mio caso, voglio dubug bootstrap tooltip. Ma i metodi di cui sopra non funzionano per me. Credo che bootstrap implementato questo da qualcosa come il mouse eventi in / out.

In ogni caso, quando ho hover su un pulsante, verrà generato un elemento fratello html sotto il pulsante, quindi seleziono elemento padre del pulsante nella scheda "Elementi" di "Strumenti per sviluppatori" finestra, posizionare il pulsante e "Ctrl + C", allora posso incollare il codice sorgente che contiene il codice generato. Ultimo trovare il codice generato, e aggiungerlo al codice sorgente da "Modifica HTML" nella scheda "Elementi".

La speranza che possa aiutare qualcuno.

Answer 12

Credo che questo non è più un problema in Chrome, ma per ogni evenienza. Ho scritto questo jQuery sceneggiatura per ispezionare il DOM quando mi muovo in giro con il tasto TAB.

Se cambiato in uso 'passaggio del mouse', sarebbe simile a questa:

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

Si può facilmente modificare per rimuovere il gestore di eventi ogni volta che si fa clic o fare qualcosa su un elemento che si desidera fermarsi a.