Estoy simplifacandolo todo al maximo. con el mismo svg, y dejando el rojo y el verde visible, digo pues voy ha hacer que cuando pase por el verde aparezca el azul, ya que este es el unico que he ocultado. dejo aqui el css.
Código CSS:
Ver original#azul{
display:none;
}
#verde:hover + #azul{
display:block;
}
Muy bien pues nada, esto es imposible, algo tan facil como esto. Sin embargo si quisiera hacer que el rojo hiciera aparecer al azul, si que se puede hacer.
Leyendo me he dado cuenta, que el problema parece ser que el verde esta en el ultimo lugar del codigo html.
Entonces las instrucciones, pueden ser descendientes respecto al codigo html, pero no se puede subir hacia arriba en css respeto al codigo html.
Creo que me explico, pero por si acaso:
en el codigo tengo de arriba a abajo.
rojo
azul
verde
asi que yo puedo decir cuando estes en rojo abre azul. por que rojo esta arriba de azul.
Pero no puedo decir, cuando estes en verde abre azul, porque verde esta debajo de azul.
Me parece increible que esto css no lo pueda hacer. Asi que si alguien sabe algun truco para hacer que el azul se vea estando en el rectangulo verde que me lo diga, porque hasta la fecha para mi ya creo que es imposible usando css.