Me explico:
Tengo un rectangulo id=rojo
Debajo otro id=azul.
(son svg, pero esta dentro de un html, poniendo el svg en linea)
Estos rectangulos estan algo separados.
pongo esto en el css
Código CSS:
Ver original#azul{
display:none;
}
/* 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{
display:block;
}
cuando paso el raton por el rojo, el azul se muestra, pero cuando voy hacia abajo al salir del rojo el azul desaparece.
Esto no me pasa si el rectangulo azul lo subo mezclandose un poco con el rojo.
Comprendo que al estar junto no me salgo del rojo y puedo tocar el azul, pero en el otro caso al haber un espacio cuado salgo del rojo no me da tiempo a tocar el azul.
Como puedo solucionar esto?
Vi por ahi la propiedad outline, que te crea un espaciovisible, pero que no ocupa espacio, pense que podria ser esa la solucion, pero no vale.
Quizas hay otra instruccion que me cree ese espacio para que no desaparezca el azul si hay un espacio entre el rojo y el azul.
O quizas lo tenga que hacer de otra manera.
alguien me puede instruir? :)