Estilo del estado del elemento al pasar el ratón sobre elementos superpuestos con CSS

Question

Tengo una estructura DOM que contiene varios divs. Visualmente, algunas de estas divisiones son hijos de otros, pero en la estructura DOM todos son hermanos.

Necesito estilizar el estado de desplazamiento de los divs "parentales" incluso al pasar el puntero sobre sus divisiones "secundarias".

¿Hay alguna manera de hacerlo sin Javscript? ¿Tal vez usando la posición actual de los divs para saber que están dentro de otro div?

---

actualización

---

El problema es que los padres son en realidad hermanos. Solo hay un contenedor y digamos 8 divs para niños. 2 son divs más grandes y los otros seis se muestran 3 dentro de cada div más grande. Algo así como:

http://jsfiddle.net/XazKw/12/

Sólo el padre que rodea a los niños se cernió debe cambiar de color.

No puedo cambiar la estructura DOM por cierto.

Answer 1

¿Qué tal que rodea todos los elementos con un solo contenedor, y luego hacer algo como:

#container:hover .parent { /* Hover styles applied */ } 

igual: http://jsfiddle.net/Wexcode/XazKw/

Answer 2

Si el estilo surte efecto en vuelo estacionario de un hermano DOM, sólo debe ser capaz de utilizar el selector de hermanos:

.parent:hover ~ .child { /* styling */ } 

Answer 3

no puedo pensar en una (o incluso un hacky) forma limpia de hacerlo con sólo CSS. Aquí hay un método de Javascript si no encuentras nada más. Solo atrapa mousemove en body.

function isOver(element, e) { 

    var left = element.offsetLeft, 
     top = element.offsetTop, 
     right = left + element.clientWidth, 
     bottom = top + element.clientHeight; 

    return (e.pageX > left && e.pageX < right && e.pageY > top && e.pageY < bottom); 

}; 

Demostración: http://jsfiddle.net/ThinkingStiff/UhE2C/

HTML:

<div id="parent"></div> 
<div id="overlap"></div> 

CSS:

#parent { 
    border: 1px solid red; 
    height: 100px; 
    left: 50px; 
    position: relative; 
    top: 50px; 
    width: 100px; 
} 

#overlap { 
    background-color: blue; 
    border: 1px solid blue; 
    height: 100px; 
    left: 115px; 
    position: absolute; 
    top: 130px; 
    width: 100px; 
    z-index: 1; 
} 

Guión:

document.body.addEventListener('mousemove', function (event) { 

    if(isOver(document.getElementById('parent'), event)) { 
     document.getElementById('parent').innerHTML = 'is over!';   
    } else { 
     document.getElementById('parent').innerHTML = ''; 
    }; 

}, false);   

function isOver(element, e) { 

    var left = element.offsetLeft, 
     top = element.offsetTop, 
     right = left + element.clientWidth, 
     bottom = top + element.clientHeight; 

    return (e.pageX > left && e.pageX < right && e.pageY > top && e.pageY < bottom); 

}; 

Answer 4

No, no puede afectar a los padres o hermanos anteriores a través de CSS solo. Solo seguir a los hermanos, lo que no te ayuda aquí.

¿Alguien más quiere una pseudoclase :parent?

Answer 5

Lo que no se puede hacer puede (a menudo) ser falso. Si bien la solución más simple sería reajustar el DOM y usar el selector de hermanos adyacentes, hay otra forma, que es a) más complicada. B) requiere un navegador moderno.

Puede usar pseudoelementos para simular un efecto de desplazamiento sobre el elemento primario.Dicho pseudo-elemento solo sería visible al pasar su elemento primario - .child en este caso :) y posicionado en forma absoluta para compensar el .childs offset de que cubre el .parent por lo que se ve como el estado original de los padres.

Fiddle here.