Interacción con objetos hover

[sajunt4]

Buenas a todos, primero disculpad por el titulo, quizás no sea demasiado claro.
Mi duda es que tengo una barra con un menú "esquemático" por decirlo de alguna forma, y me gustaría que al pasar el ratón por cada elemento se ejecutara una transición en un cuadro de texto situado en la parte inferior de la web hacia arriba, con un texto a elegir. Es decir, que al pasar el ratón sobre un elemento del menú superior otro elemento reaccione al hover. Se entiende?

Si es esto posible, ¿podría alguien pasarme un ejemplo?

Muchas gracias a todos de antemano!

[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.

[Trublux]

Para este caso en concreto creo que lo mejor sería hacerlo con JavaScript.

[sajunt4]

La verdad es que el elemento no lo he definido todavía, así que quizás intente adecuarlo a lo que me has dicho.
En caso de querer hacerlo en javascript, mejor lo posteo en su apartado, o alguien tiene idea de como podría hacer algo así?

Muchisimas gracias por responder, un placer pertenecer al foro!
Saludos!