Cómo establecer elemento de estado: hover en las herramientas de desarrolladores de Chrome y el estilo de edición del niño

Supongamos que tenemos este estilo:Cómo establecer elemento de estado: hover en las herramientas de desarrolladores de Chrome y el estilo de edición del niño

.parent .child { ... } 

.parent:hover .child { ... }

Ambos selectores de estilo establecidos para elementos secundarios.

Lo que me gustaría es editar el segundo estilo.

hago clic en .parent y establecer :hover estado en herramientas para desarrolladores de Chrome
Haga clic en un elemento .child llegar al estilo del niño, pero ...

Cuando hago clic en el cursor del .child de los padres se ha ido (porque ahora está configurado en .child).

^{Esto funciona de Firebug, pero aunque lo necesito en Chrome ...}

Chrome 21.0.1180.89 m

Fuente

2012-09-12 Robert Koritnik

actualización: Chrome ahora tiene la siguiente nueva picor:

Haga clic en el elemento secundario y selecciona Inspeccionar elemento
- Chrome se abrirá los elementos de la vista con el elemento seleccionado
En la vista de elementos, haga clic en el elemento principal y seleccione "Fuerza Elemento Estado ▶: hover"
Seleccione el elemento secundario en los elementos de la vista de nuevo.

Mayor, técnica válida-pero-desagradable sigue:

probado con this JSFiddle:

Hover el elemento hijo en sí (que también pasa el padre).
Haga clic con el botón secundario en el elemento secundario.
Utilizando el teclado (no ratón) mover la selección del menú contextual a "Inspeccionar elemento" y presione Introduzca
- Hurra, la regla CSS para el padre cernía y el niño seleccionado está disponible
Edite la regla. (Puede mover el mouse para hacer esto; el elemento se descubrirá, pero la regla CSS con :hover en él no desaparecerá.)
Pase el mouse sobre el elemento para ver cómo la regla cambiada surte efecto .

Tenga en cuenta que si lo hace incorrectamente en el paso 3 (si usa el mouse) primero tiene que seleccionar un elemento diferente antes de volver a intentarlo.

Fuente

2012-09-12 16:08:37 Phrogz

Una buena solución. Dudo que los desarrolladores de Chrome intencionalmente lo hicieron de esta manera, pero funciona de esta manera. ¡Gracias! –

** Pero **: cuando selecciona * Inspeccionar elemento * usando el teclado ... ¿Cómo se llega a los estilos y luego si no se le permite mover el mouse? –

Una forma es asegurarse de que * la selección del menú * Inspeccionar elemento * ya se muestre en el área de herramientas de desarrollo. A continuación, puede hacer clic fácilmente en él con un mouse y usar el mouse luego, mientras que el elemento permanece en estado de desplazamiento, ya que el navegador no detectó un mouse. :) Pero no sé cómo llegar a editar estilos después de seleccionar * Inspeccionar elemento *? –

Cuando usted tiene las herramientas dev abiertos y mirando a su estilo en el lado derecho de la barra de encabezado donde dice Styles, hay un botón más donde puede agregar reglas personalizadas de hoja de estilo del inspector. Esto puede ser lo que estás buscando.

Fuente

2012-09-12 15:59:14 Ryan

(Chrome 22)

En el panel Elements, haga clic en el elemento y seleccione .parentForce Element State > :hover en el menú contextual. Voila.

Como alternativa, puede hacer clic en el botón "puntero sobre un rectángulo punteado" en el encabezado del panel Styles de la derecha y marcar/desmarcar las pseudoclases que se forzarán en el elemento seleccionado actualmente.

El estado del elemento ahora se puede forzar en cualquier elemento del árbol DOM, no solo en el árbol seleccionado actualmente.

Fuente

2012-09-14 15:29:39

Cómo establecer elemento de estado: hover en las herramientas de desarrolladores de Chrome y el estilo de edición del niño

Respuesta

Cuestiones relacionadas