jQuery: Mostrar y ocultar div niño cuando se cierne

Question

Tengo un conjunto de elementos. Cada elemento tiene dos imágenes y texto. Para las imágenes que he creado un div padre que tiene un overflow: hidden valor CSS. Quiero lograr un efecto del ratón. Tan pronto como se pasa sobre las imágenes que desea ocultar el div actual y mostrar la segunda div. He aquí un pequeño fragmento:

<div class="product-images">
<div class="product-image-1"><img src="image1.gif>" /></div>
<div class="product-image-2"><img src="images2.gif" /></div>
</div>

He creado un pequeño fragmento de jQuery:

jQuery(document).ready(function() {
    jQuery('.product-images').mouseover(function() {
        jQuery('.product-image-1').hide();
    }).mouseout(function() {
        jQuery('.product-image-1').show();
    });
});

Ahora el problema no es sólo el niño actualmente oscilado está oculto. En su lugar, todos los otros hijos que ya están ocultos también. Necesito algo como "esto" o "corriente", pero no sé qué función jQuery es la correcta. Alguna idea?

Gracias, BJ

Answer 1

he encontrado la solución. Gracias chicos.

jQuery(document).ready(function() {
    jQuery('.product-images').hover(function() {
        jQuery(this).find('img:first').hide()
    }, function() {
        jQuery(this).find('img:first').show();
    });
});

Answer 2

¿Es esto lo que busca?

jQuery(document).ready(function() {
    jQuery('.product-images img').mouseover(function() {
        jQuery(this).parent().hide();
    }).mouseout(function() {
        jQuery(this).parent().show();
    });
});

Answer 3

Esta palabra clave funciona bien:

$(this).hide();
$(this).show();