Interacción con objetos hover

[pzin]

Es posible bajo ciertas condiciones. Es una cuestión de la limitación de selectores que hay en CSS.

Lo habitual es que tengas un elemento, y el :hover afecte a los hijos. Pero, gracias a los selectores ~ y + puedes seleccionar elementos hermanos descendientes. Es decir, en un caso así:

Código HTML:

<p></p>
<span></span>
 

Puedes afectar al elemento span al hacer :hover al elemento p, pero no a la inversa —es decir, no funciona de forma ascendente.

El selector ~ selecciona todos los elementos hermanos descendientes. Por ejemplo:

Código HTML:

<p></p>
<p></p>
<p></p>
<p></p>
 

Código CSS:

p:hover ~ p {
  color: red
}
 

Saldrían de color rojo todos los párrafos siguientes al que se le hace :hover. Ejemplo: http://jsfiddle.net/qjzeC/

Por otro lado existe el selector +, que es pareceido a ~ con la salvedad de que sólo selecciona un elemento hermano inmediatamente posterior. Luego en el ejemplo anterior, cambiando el selector a:

Código CSS:

p:hover + p
 

Sólo cambiaría a color rojo el siguiente párrafo seleccionado. Ejemplo: http://jsfiddle.net/qjzeC/1

Para entenderlo mejor, otro ejemplo:

Código HTML:

<p></p>
<div></div>
<p></p>
<p></p>
 

Código CSS:

p:hover ~ p
 

Se cambian a rojo todos los siguientes párrafos al que se le hace :hover. Ejemplo: http://jsfiddle.net/qjzeC/2

Y por último, el caso donde se ve bien el funcionamiento de +. Con el mismo HTML anterior, si cambias el selector a:

Código CSS:

p:hover + p
 

Sólo se seleccionaría el último párrafo, ya que al pasar sobre el primero, el elemento que le sigue no es un párrafo sino un div. Ejemplo: http://jsfiddle.net/qjzeC/3

¡Dicho esto! Para poder tener alguna interacción con elementos tan separados el uno del otro, estos deberían de ser hermanos. Es decir, no te vale que un menú esté en:

body>head>nav>ul>li>a

Para interactuar con:

body>footer>div

Si quieres, puedes hacerlo con CSS usando el selector ~, pero seguramente la semántica de tu página sufrirá un revés importante.

Por lo tanto, todo este tostón para llegar a la conclusión de que con JavaScript seguramente tengas una solución mejor y más acertada.