Desaparecer Div

[luissquadrito]

Amigos ayuda porfavor tengo el siguiente codigo que hace que parezce un div al pasar por el nombre de la ciudad funciona perfecto pero ahora quiero que al psar por encima de otra ciudad la atenrior desaparezca. alguna idea de como lo puedo hacer?

[luissquadrito]

perdon este es un ejemplo de como lo estoy haciendo me olvide colorcar el codigo

<div class="row">
<div class="col-md-5" >
<img src="img/Arica.png" />
</div>
<div id="imagen" onmouseover='$("#capa").fadeIn("slow"); $("#capa").css("display","block");' >Regi&oacute;n Arica y Parinacota</div>
<div id="capa" style="display: none;"><table class="modo1"><tr><th colspan="3"><center>Pasos Fronterizos</center></th></tr><tr><td><a href="#">Visviri</a></td><td><a href="#">Chungara</a></td><td><a href="#">Chacalluta</a></td></tr></table></div>
</div>
<div class="row">
<div class="col-md-5">
<img src="img/Iquique.png"/>
</div>
<div id="imagen" onmouseover='$("#capa1").fadeIn("slow"); $("#capa1").css("display","block");' >Regi&oacute;n de Tarapaca</div>
<div id="capa1" style="display: none;"><table class="modo1"><tr><th colspan="3"><center>Pasos Fronterizos</center></th></tr><tr><td><a href="#">Visviri</a></td><td><a href="#">Chungara</a></td><td><a href="#">Chacalluta</a></td></tr></table></div>
</div>

[Alexis88]

Primero, te aconsejo utilizar el highlight del foro para mostrar el código, así se podrá leerlo mejor. Segundo, debes dejar de usar la forma inline de añadir código JavaScript y CSS y empezar a tenerlo por separado, es decir, el código JavaScript en un archivo de extensión .js y el código CSS en un archivo de extensión .css. Además, debes tener presente que el valor del atributo id no debe repetirse, es decir, no debe haber más de un elemento en el mismo documento con el mismo valor para dicho atributo. En su lugar te aconsejo utilizar el atributo class cuyos valores sí pueden repetirse.

Ahora bien, esto puede ser resuelto ya sea con JavaScript puro, su librería jQuery que es la que estás usando incorrectamente o con cualquier otra librería. También existe una solución con CSS que es más simple y corta. Te mostraré un ejemplo de solución con jQuery y otro con CSS, teniendo en cuenta que ahora deberás trabajar con el atributo class.

Código Javascript:

$(".imagen").hover(function(){
    $(this).next(".capa").fadeIn();
}, function(){
    $(this).next(".capa").fadeOut();
});
 

Código CSS:

.imagen:hover + .capa{
    display: block;
}
 

En el primer ejemplo, utilizo el método .hover() de jQuery para ejecutar un par de funciones anónimas cuando se coloque el cursor del ratón sobre el elemento relacionado y cuando este sea retirado del mismo, siendo que las funciones están dispuestas precisamente en ese orden. Con el método .next() busco al siguiente elemento con respecto al elemento relacionado cuyo identificador coincida con el que se le pasa como argumento.

En el segundo ejemplo, utilizo el operador + para afectar únicamente al elemento posterior más cercano a cualquiera que posea la clase "imagen" y en el que se esté posando el cursor del ratón encima. Cuando este sea retirado, el efecto establecido dejará de surtir efecto.

No olvides cambiar los id por class y quitar el código inline, es decir, los onmouseover="..." y style="...". Antes de quitar los style="...", asegúrate de tener el código CSS en un archivo aparte, caso contrario, deja esa parte como está.