Bueno al final, he podido hacer una pequeña trampa, pero eso ha incluido añadir algo mas de codigo html.
Como el problema era que necesitaba que el azul, estuviera abajo del todo del codigo html, lo que hize fue duplicar ese azul, justo debajo del verde.
Dejo la etiqueta svg para que se vea.
Código HTML:
Ver original<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="1000"
height="800"
viewBox="0 0 1000 800.00001"
id="svg2"
version="1.1">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1"
transform="translate(0,-252.36216)">
<rect
style="opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:evenodd;stroke:#ffff00;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rojo"
width="308.91031"
height="94.010918"
x="145.54485"
y="352.90701" />
<rect
style="opacity:1;fill:#00ffff;fill-opacity:1;fill-rule:evenodd;stroke:#ffff00;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="azul"
width="308.6713"
height="88.988068"
x="145.82274"
y="442.86813" />
<rect
y="443.27179"
x="454.59467"
height="88.609352"
width="302.92929"
id="verde"
style="opacity:1;fill:#00ff00;fill-opacity:1;fill-rule:evenodd;stroke:#ffff00;stroke-width:4.9520607;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
y="442.86813"
x="145.82274"
height="88.988068"
width="308.6713"
id="azul2"
style="opacity:1;fill:#26d0c1;fill-opacity:1;fill-rule:evenodd;stroke:#ffff00;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
</svg>
ha este segundo azul le puse una id="#azul2" y le puse otro color para que se vea el cambio.
y aqui dejo el codigo css
Código CSS:
Ver original/*ocultamos los elementos*/
#azul, #azul2, #verde{
display:none;
}
/*con esto mantengo los rectangulos visibles cuando el puntero esta dentro de los rectangulos*/
#azul:hover, #verde:hover, #azul2:hover{
display:block;
}
/* cuando pasa el raton por un rectangulo enciende el otro*/
#rojo:hover + #azul, #azul:hover + #verde, #verde:hover + #azul2 {
display:block;
}
/* con esto cambia el color del verde a un verde mas oscuro*/
#verde:hover{
fill:#29c929 !important;
}
He puesto cambios de color para que se vea que son diferentes rectangulos.
La idea es que el azul sea una copia del azul2, asi cuando pase al verde no se nota que ha cambiado nada.
Si lo probais vereis que funciona, pero aun le falta algo para ser perfecto y esto si que no se porque pasa.
Si lo pruevas veras que cuando pasas del azul al verde, el azul2 se mantiene visible, pero hay que pasar de uno a otro a una velocidad adecuada, porque si lo pasas a una velocidad lenta, no se porque desaparece el verde, pero se queda el azul2 y ya no aparece el verde a menos que salgas del azul2 para volver ha hacer el ciclo.
Me imagino que leyendo esto deve parecer un trabalenguas.
pero si se prueva se comprende mejor, pasa del azul al verde lento y luego pasalo rapido y vereis lo que digo.
esto a que se deve? y se puede solucionar con algo?
Venga que ya casi lo estamos consiguiendo, echarme una mano con esto, porque si supero esto, ya creo que estaria echo :)