Come impostare elemento di: hover stato in strumenti di sviluppo Chrome e lo stile di modifica del bambino

Question

Supponiamo di avere questo stile:

.parent .child { ... } 

.parent:hover .child { ... } 

Entrambi i selettori di impostare lo stile per gli elementi figlio.

Quello che mi piacerebbe è modificare il secondo stile.

1. clicco su .parent e impostare :hover Stato in strumenti di sviluppo Chrome
2. Fare clic su un elemento .child arrivare allo stile del bambino ma ...

Quando clicco sul .child l'hover sul genitore è andato (perché ora è impostato su .child).

^{Questo funziona in Firebug però, ma ne ho bisogno in Chrome ...}

Chrome 21.0.1180.89 m

Answer 1

Aggiornamento: Chrome ora ha il seguente nuovo piccante:

1. pulsante destro del mouse l'elemento figlio e scegliere Inspect Element
   • Chrome aprirà Elementi View con l'elemento selezionato
      

2. Nella visualizzazione Elementi, fare clic destro l'elemento principale e scegliere "Forza Elemento Stato ▶: hover"
   

3. Selezionare l'elemento figlio negli Elementi visualizzare nuovamente.

---

più vecchio, tecnica valida, ma-antipatico segue:

testati con this JSFiddle:

1. Hover l'elemento figlio in sé (che si aggira anche il genitore).
2. Fare clic con il tasto destro del mouse sul bambino.
3. Utilizzando la tastiera (non del mouse) spostare la selezione menu contestuale fino a "Inspect Element" e premere Invio
   • Evviva, la regola CSS per il genitore è passato il mouse e il bambino selezionato è disponibile
4. Modificare la regola. (È possibile spostare il mouse per fare questo, l'articolo sarà unhovered, ma la regola CSS con l':hover in esso non andrà via.)
5. passa il mouse indietro sopra l'elemento per vedere la regola modificata abbia effetto .

Si noti che se si sbaglia nel passaggio 3 (se si utilizza il mouse) è necessario selezionare un elemento diverso prima di riprovare.

Answer 2

Quando si hanno gli strumenti di sviluppo aperti e il vostro guardando lo stile riquadro sul lato destro della barra di intestazione in cui si dice Styles, c'è un pulsante più in cui è possibile aggiungere le regole personalizzate del foglio di stile ispettore. Questo potrebbe essere ciò che stai cercando.

Answer 3

(Chrome 22)

Nel pannello Elements, destro del mouse l'elemento .parent e selezionare Force Element State > :hover nel menu contestuale. Ecco.

In alternativa, è possibile fare clic sul pulsante "puntatore su un rettangolo tratteggiato" nell'intestazione del riquadro Styles a destra e selezionare/deselezionare le pseudo-classi da forzare sull'elemento attualmente selezionato.

Lo stato dell'elemento può ora essere forzato su qualsiasi elemento nell'albero DOM, non solo quello attualmente selezionato.