Vedi: hover state in Strumenti per sviluppatori di Chrome

Voglio vedere lo :hoverstile di un'ancora su cui sto in bilico su Chrome . In Firebug c'è un menu a discesa che mi consente di selezionare stati diversi per un elemento.

Non riesco a trovare nulla di simile in Chrome. Mi sto perdendo qualcosa?

Ora puoi vedere entrambe le regole della pseudo-classe e forzarle sugli elementi.

Per visualizzare le regole come :hovernel riquadro Stili, fai clic sul :hovtesto piccolo in alto a destra.

Per forzare un elemento in :hoverstato, fai clic con il pulsante destro del mouse e seleziona :hover.

Ulteriori suggerimenti sul pannello degli elementi nelle scorciatoie degli Strumenti di sviluppo di Chrome .

EDIT: questa risposta era prima della correzione del bug, vedi la risposta di tnothcutt.

• Fai clic con il pulsante destro del mouse sull'elemento, ma NON spostare il puntatore del mouse lontano dall'elemento, mantienilo nello stato di passaggio del mouse.
• Scegli ispeziona l'elemento tramite tastiera, come nella freccia premuta e poi premi il tasto Invio.
• Cerca negli strumenti per sviluppatori in Regole CSS abbinate, dovresti essere in grado di vedere: passa il mouse.

PS: l'ho provato su uno dei tuoi tag di domanda.

Volevo vedere lo stato al passaggio del mouse sui miei suggerimenti Bootstrap. Forzare lo stato: hover in Chrome dev Tools non ha creato l'output richiesto, ma innescare l'evento mouseenter tramite console ha funzionato in Chrome. Se jQuery esiste sulla pagina è possibile eseguire:

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

Esistono diversi modi per visualizzare gli stili HOVER STATE negli strumenti per sviluppatori di Chrome.

Metodo 01

Metodo 02

Con il pedaggio predefinito per gli sviluppatori di Firefox

Con Firebug

Nel caso in cui aiuti, questo sembra essere più facile nell'ultimo Chrome (47.0.2526.106):

Ispeziona l'elemento e fai clic sui tre punti bianchi nella grondaia sinistra:

Quindi scegli lo stato dell'elemento desiderato da questo menu a discesa:

Non penso che ci sia un modo per farlo. Ho inviato una richiesta di funzionalità . Se c'è un modo, gli sviluppatori di Google lo indicheranno sicuramente e io modificherò la mia risposta. In caso contrario, dovremo aspettare e guardare. (puoi votare il problema per votarlo)

Commento 1 del membro del progetto Chrome : in 10.0.620.0, il pannello Stili mostra: stili al passaggio del mouse per l'elemento selezionato ma non: attivo.

(a partire da questo post) La versione attuale del canale stabile è 8.0.552.224.

Puoi sostituire l' installazione del tuo canale stabile di Google Chrome con il canale Beta o il canale Dev (vedi Canali di rilascio ad accesso anticipato ).

Puoi anche installare un'installazione secondaria di Chrome che è ancora più aggiornata del canale Dev .

... La build di Canary viene aggiornata anche più frequentemente del canale Dev e non viene testata prima di essere rilasciata. Poiché la build di Canary può a volte essere inutilizzabile, non può essere impostata come browser predefinito e può essere installata in aggiunta a uno dei canali di Google Chrome sopra indicati. ...

So che quello che faccio è piuttosto una soluzione alternativa, tuttavia funziona perfettamente e questo è il modo in cui lo faccio ogni volta.

Quindi, procedere in questo modo:

• Innanzitutto assicurati che Chrome Developer Tools sia sganciato.
• Quindi, sposta qualsiasi lato della finestra Dev Tools al centro dell'elemento che vuoi ispezionare mentre sei in bilico.

• Infine, passa con il mouse sull'elemento, fai clic con il pulsante destro del mouse e ispeziona l'elemento, sposta il mouse nella finestra Dev Tools e sarai in grado di giocare con il tuo elemento: hover css.

Saluti!

Stavo eseguendo il debug di uno hoverstato di menu con Chrome e ho fatto questo per poter vedere il codice di stato al passaggio del mouse:

Nel Elementspannello fai clic sul Toggle Element statepulsante e seleziona :hover.

Nel Scriptspannello vai Event Listeners Breakpointsnella sezione in basso a destra e seleziona Mouse -> mouseup.

Ora controlla il menu e seleziona la casella desiderata. Quando rilasci il pulsante del mouse, questo dovrebbe fermarsi e mostrarti lo stato di passaggio del mouse selezionato nel Elementspannello (guarda la Stylessezione).

Il passaggio allo stato al passaggio del mouse in Chrome è piuttosto semplice, procedi nel seguente modo:

1) Fare clic con il tasto destro del mouse sulla pagina e selezionare Ispeziona

2) Seleziona l'elemento che desideri ispezionare nel DOM

3) Seleziona l'icona della puntina (Attiva / disattiva stato elemento)

4) Quindi spunta il cursore

Ora puoi vedere lo stato al passaggio del mouse sul DOM selezionato nel browser!

Ho potuto vedere lo stile seguendo i passaggi seguenti suggeriti da Babiker: "Fai clic con il pulsante destro del mouse sull'elemento, ma NON spostare il puntatore del mouse lontano dall'elemento, mantienilo nello stato al passaggio del mouse. Scegli ispeziona l'elemento tramite tastiera, come nella freccia rivolta verso l'alto e quindi premere il tasto ".

Per cambiare stile segui i passaggi precedenti e poi - Cambia la scheda del tuo browser premendo ctrl + TAB sulla tastiera. Quindi fare clic sulla scheda che si desidera eseguire il debug. Lo schermo al passaggio del mouse sarà ancora lì. Ora porta con attenzione il mouse nell'area degli strumenti per sviluppatori.

Nel mio caso, desidero duplicare la descrizione del bootstrap. Ma i metodi sopra non funzionano per me. Immagino che bootstrap lo abbia implementato con qualcosa come l'evento mouse in / out.

Ad ogni modo, quando passo con il mouse su un pulsante, verrà generato un elemento html fratello sotto il pulsante, quindi seleziono l'elemento padre del pulsante nella scheda "Elementi" della finestra "Strumenti di sviluppo", passo il pulsante e "Ctrl + C", quindi posso incollare il codice sorgente che contiene il codice generato. Trova per ultimo il codice generato e aggiungilo al codice sorgente tramite "Modifica come HTML" nella scheda "Elementi".

Spero che possa aiutare qualcuno.

Penso che questo non sia più un problema in Chrome, ma per ogni evenienza. Ho scritto questo script jQuery per ispezionare il DOM quando mi muovo con il tasto TAB.

Se modificato per utilizzare 'mouseover', sarebbe simile al seguente:

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

Puoi facilmente modificarlo per rimuovere il gestore eventi ogni volta che fai clic o fai qualcosa su un elemento a cui vuoi fermarti.