houston tenemos un problema.
he decidido hacerlo al final, juntandose los cuadrados, porque es la unica manera que sale, pero ahora me ha surgido un problema nuevo que la verdad no entiendo por que pasa.
He añadido otro cuadro #verde, este esta al lado del azul, asi que cuando pase por el azul el verde se tiene que ver, eso lo he conseguido, con las instrucciones, pero el problema que al pasar por el verde el azul desaparece.
Le añadi una instruccion que se supone que tendria que valer, ya que me vale con el #rojo pero no es asi y no entiendo por que.
dejo aqui la etiqueta svg y el css, haber si se sabe que estoy haciendo mal, ya que si no lo soluciono no podre hacer un navegador con css.
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"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="1000"
height="800"
viewBox="0 0 1000 800.00001"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="1.svg">
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1366"
inkscape:window-height="697"
id="namedview11"
showgrid="false"
inkscape:zoom="2.36"
inkscape:cx="468.19891"
inkscape:cy="559.86365"
inkscape:window-x="-9"
inkscape:window-y="-9"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<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:#00ff00;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rojo"
width="305.71429"
height="80"
x="144.86682"
y="368.65759"
inkscape:label="" />
<rect
style="opacity:1;fill:#00ffff;fill-opacity:1;fill-rule:evenodd;stroke:#00ff00;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="azul"
width="302.85715"
height="88.571426"
x="145.81679"
y="444.48294"
inkscape:label="" />
<rect
y="445.75198"
x="446.75546"
height="88.571426"
width="302.85715"
id="verde"
style="opacity:1;fill:#00ff00;fill-opacity:1;fill-rule:evenodd;stroke:#00ff00;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
inkscape:label="" />
</g>
</svg>
Código CSS:
Ver original/*con esto ya tengo los dos ocultos*/
#verde{
display:none;
}
#azul{
display:none;
}
/*con esto ya cuando pase el raton ya puedo ver los rectangulos*/
/* el signo mas + es importante, es lo que hace decir, cuando pase por el rojo que el azul se muestre*/
#rojo:hover + #azul{
display:block;
}
#azul:hover + #verde{
display:block;
}
/*con esto mantengo los rectangulos visibles cuando el puntero esta dentro de los rectangulos*/
#azul:hover{
display:block;
}
#verde:hover{
display:block;
}
/*porque falla esta instruccio?????*/
#verde:hover + #azul{
display:block;
}
dios mio que dificil jajaajajajajajajajajajajajajajaajajajaja