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
:
Ver original$(".imagen").hover(function(){
$(this).next(".capa").fadeIn();
}, function(){
$(this).next(".capa").fadeOut();
});
Código CSS:
Ver original.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á.
