duda sobre el evento hover

[RafaRG]

buenas. hay algo que quisiera saber. hasta ahora, para que un elemento de una página cambie haciendo hover sobre otro elemento, el elemento que cambia tenía que meterlo dentro del elemento sobre el que hago hover. por ejemplo, el siguiente código:

Código PHP:

  <style type="text/css">
#rojo {
    width:600px;
    height:400px;
    background-color:red;
    }
#rojo #amarillo {
    display:none;
    }
#rojo:hover #amarillo {
    display:block;
    height:200px;
    width:600px;
    background-color:yellow;
    position:relative;top:100px;
    }
</style>
<div id="rojo">
    <div id="amarillo"></div>
</div>  
   

el código en sí hace, al hacer hover en rojo, que aparezca amarillo. si os fijáis, el div amarillo he tenido que incluirlo dentro del div rojo.
mi pregunta es la siguiente: ¿se puede hacer el mismo efecto, para cualquier efecto, pero sin tener que incluir el elemento que cambia dentro del elemento en el que hago hover? osea, que, para este ejemplo, amarillo no tenga que ir dentro de rojo.
en pocas palabras: quisiera saber cómo optimizar el código.
espero haberme explicado bien.
un saludo

[Carlangueitor]

Te molesta mucho esta forma? Lo que pasa es que le podrías poner directamente el hover a a amarillo, pero como por defecto está oculto nunca podrás pasar el mouse encima de el.

Osea que la forma que estás usando está bien.

Saludos

[cristian_cena]

Hola Rafa, creo que hasta ahí llega css.
Seguramente los nuevos selectores css3 permitirán jugar un poco más.

Código:

// Por ejemplo, el selector de hermanos:
#rojo ~ #amarillo {... estilos ...}

//para...
<div id="rojo"></div><div id="amarillo"></div>

En este tema el compañero ryugen hace una buena demostración.

Pero ya cuando hay mucha distancia (en la jerarquía dom, relacion padre/hijo) entre el elemento que contiene el evento y el/los otro/s elemento/s sobre el que se llevarán a cabo los cambios (por ejemplo, hacer hover sobre un enlace en la cabecera y que cambie el contenido de un enlace en el footer) al menos en mi experiencia, y mi ignorancia, es hora de poner manos en código javascript.
Para lo cual particularmente opto por jquery por su facilidad en la manipulación del dom y por la seguridad de que obtendré un resultado crossbrowser.

Saludos.

[RafaRG]

Carlangueitor: no, no es que me moleste mucho. es solo que quería saber si existían más formas de hacer la misma cosa.
cristian_cena: lo que ryugen pone como ejemplo parece interesante. de hecho, he encontrado una nueva forma de hacer los tab solo con css, cosa que hasta ahora hacía con javascript.
muchas gracias por las respuestas.

[lestrade]

Existen eventos de javascript como onclick, onmouseover, onmouseout, etc. que también puedes utilizar.

[RafaRG]

es otra posibilidad, pero eso tiende a ser menos incompatible con los navegadores más estrictos en seguridad. por ejemplo, en internet explorer, me pide permiso para ejecutar cierto script (mostrar y ocultar contenido) que en otros navegadores ejecuta sin problemas.

[Carlangueitor]

Eso no tiene nada que ver. Internet explorer no te deja ejecutarlo en local, pero cuando lo subas a un servidor o instales un servidor en tu equipo eso no pasa.

Saludos

[RafaRG]

vaya, pues ignoraba eso. gracias por el dato :)