ocultar una imagen y mostrar otra con jquery

[cristo995]

tengo xxx cantidad de div cada uno contiene 2 imagenes lo que quiero hacer es que al pasar el mouse por ensima se oculte la img por defecto y se muestre la otra..

ya el htm lo tengo y el css tambien , ala segunda img la oculte con display:none;

por medio de "id" y "class" manejo el efecto asi:

<div class="publicidad">
<img id="none" src="img/tcc-g.png" alt="" class="g">
<img src="img/tcc-c.png" alt="" class="c">
</div>

$('#none').mouseover(function(){
$(this).fadeOut('fast');
$('.c').fadeIn('fast');
});

$('.c').mouseout(function(){
$(this).fadeOut('fast');
$('#none').fadeIn('fast');
});


esto funciona bien con las primeras imagenes del primer div..

el problema es que son muchos div cada uno con 2 img , entonces no le puedo poner el mismo "id" y "class" en todas.. por q al pasar el mouse por ensima de la primera automaticamente todas me toma el efecto

como podria solucionar esto ?

[Ktulu]

Trabajarlo con la clase sería lo mas conveniente:

Código Javascript:

$('.publicidad').on('mouseenter',function(){
   $(this).find('img:visible').hide().siblings('img').show()
})
 

Saludos!

[Alexis88]

No es necesario que utilices identificadores únicos, basta con que utilices la clase del contenedor y los métodos de selección de jQuery.

Código Javascript:

$(".publicidad").hover(function(){
    $(this).find("img").toggle();
}, function(){
    $(this).find("img").toggle();
});
 

De esta forma, al posar el cursor sobre cada <div>, buscas a las imágenes que contiene y cambias su visibilidad; si alguna de ellas es visible, dejará de verse y viceversa. Cuando retires el curso del <div>, se producirá el efecto contrario.



Saludos

[cristo995]

gracias.. funciona perfecto..

pero me quedo con la intriga del "find"

podrias explicarme como es el funcionamiento de este..

tambien me gustaria saber, por que solo funciona bien con toggle - lo intercambie por fadeIn y fadeOut y jmm se me armo un despelote funcionando muy mal..

[Alexis88]

El método find lo utilizo para buscar elementos dentro del <div>, es como si hicieras un div.getElementsByTagName("img"). Con respecto a lo segundo, cualquier otro método de efectos hubiera sido útil, solo que el método toggle (y todos los que tienen esa palabra, como slideToggle y fadeToggle) es más práctico para este caso pues cambia la visibilidad del elemento afectado, sin importar si este es visible o no.

Saludos