Problema con grupo, como se hace?

[lobopk2]

tengo este codigo

Código HTML:

<nav>
<svg
   width="1000"
   height="800"
   viewBox="0 0 1000 800">
 
<!--ROJO-->
    <g id="layer2">             
        <rect
            id="rojo"
            height="94.010918"
            width="308.91031"/>
         
<!--AZUL-->    
        <g id="layer3">             
            <rect
                id="azul"
                height="88.988068"
                width="308.6713"/>
        </g>
    
<!--AZUL2-->    
        <g id="layer4">             
            <rect
                width="308.6713"
                 height="88.988068"
                 id="azul2"/>
        </g> 
      
 </g>
</svg>
</nav>
 

y este css

Código CSS:

/****************************MENU SVG***********************************/
 
                            /*ocultamos los elementos*/
                            
#azul       {display:none;}
#azul2      {display:none;}
 
 
  /*******************************************************************************************************/
                    /* cuando pasa el raton por un rectangulo enciende el otro*/
                    
#rojo:hover ~ g #azul       {display:block;}
 
#azul:hover ~ g #azul2      {display:block;}   /*¿¿¿¿¿¿¿PORQUE ESTA INSTRUCCION NO ME VA??????*/
 
 
 
 
/*******************************************************************************************************/
/*con esto mantengo los rectangulos visibles cuando el puntero esta dentro de los rectangulos*/
 
#azul:hover     {display:block;}
#azul2:hover    {display:block;}
 
 
/*******************************************************************************************************/
                /********************ESTILOS INKSCAPE*************************/
                
#rojo {opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;y:280.36575;x:21.342251;}  
 
#azul {opacity:1;fill:#00ffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;y:374.37665;x:21.461758;}
 
#azul2 {opacity:1;fill:#26d0c1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;x:21.461758;y:374.37665;}
 

Ahi esta mi duda, puedo encender el azul al pasar por el rojo, pero no puedo cambiar al pasar por el azul a azul2, creia que la instruccion estaria bien, pero ya veo que no.

En verdad ya no se si azul dos es hijo, hermano o tataranieto lejano.

Como lo tendria que poner? alguien sabe algo?

Estoy mirando el codigo y al llevar la virgulilla ~ el primer rojo me da a entender que es hermano de g y azul es hijo de g. Claro entonces tambien la instruccion que me falla es verdadera.

Aunque parece ser que rojo encierra a todos los g y son hermanos, pero los demas colores no son hermanos de g, solo hijos de sus g. Aqui se ha montado una muy gorda, porque entonces los colores son sobrinos de rojo? y los colores entre si, que son colegitas? madre mia que jaleo.

Seguro que el que lo vea y sepa lo entiende rapido, pero para mi esto empieza a ser un trabalenguas.

[lobopk2]

Vale ya lo tengo claro :)