Hola cómo estás. Luego de estar intentando de una forma u otra, probé JavaScript y no funcionó. Finalmente pude hacerlo con jquery.
Código:
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).on('ready',function(){
/* Funciones de carga */
$("#rojo").on("mouseover",function(){
document.getElementById("azul").style.display ="block";
});
$("#rojo").on("mouseout",function(){/* Cuando sale el mouse del cuadro rojo */
setTimeout(function(){/* Pasan 4 segundos y desaparece el azul*/
document.getElementById("azul").style.display ="none";
}, 4000);
});
});
</script>
Código HTML:
<g transform="translate(0,-252.36216)" id="layer1">
<rect
y="369.50504"
x="145.71428"
height="80"
width="305.71429"
id="rojo"
style="opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:evenodd;stroke:#ff0000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;" />
<rect
y="492.36215"
x="262.85715"
height="88.571426"
width="302.85715"
id="azul"
style="opacity:1;fill:#00ffff;fill-opacity:1;fill-rule:evenodd;stroke:#ff0000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
Espero que te sirva!
Que estés bien.
Zeroed!