Pase el ratón sobre un niño sin efecto de desplazamiento sobre el padre

Así que tengo 2 div ‘s están el uno en el otro así que así

 

y quiero cambiar el background de .parent cuando .parent .parent .

pero quiero que el background vuelva a ser normal cuando estoy sobre .child .

así por ejemplo: http://jsfiddle.net/k3Zdt/1/

Cuando sobrevivo sobre el área de color azul oscuro quiero que el área no tan azul oscura permanezca no tan azul oscuro en lugar de cambiar a blanco.

Me gustaría mantener esta estructura

. y no quiero una solución de JavaScript (conozco la solución de JavaScript, pero quiero mantenerla pura CSS).

Básicamente no se puede: ¿Cómo se forma el elemento padre al pasar el elemento secundario?

Pero un truco es usar un elemento hermano: http://jsfiddle.net/k3Zdt/8/

 

Puedes engañar algo;)

Básicamente, use a :before pseudo-element para el div infantil, con su mismo tamaño;

cuando pasas el cursor sobre el div infantil, agranda el :before pseudo-elemento para cubrir el área div del padre; esto causará que el efecto div hover del padre se caiga y luego vuelva al estado original. Una combinación precisa de z-index también está involucrada.

Demostración: http://jsfiddle.net/gFu8h/

CSS Dark Magic ™

 .parent { width:100px; height:100px; padding:50px; transition:background-color 1s; background:#3D6AA2; position: relative; z-index: 1; } .parent:hover{ background:#FFF; } .child { height:100px; width:100px; background:#355E95; transition:background-color 1s; position: relative; } .child:hover { background:#000; } .child:before{ content: ''; position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: -1; transition:background-color 1s; } .child:hover:before{ top: -50px; bottom: -50px; left: -50px; right: -50px; background:#3D6AA2; }