jQuery: mostre e oculte a criança dividida quando pairava

Question

Eu tenho um conjunto de itens. Cada item tem duas imagens e algum texto. Para as imagens, criei um Div pai que tem um excesso: o valor CSS oculto. Eu quero alcançar um efeito de mouseover. Assim que você passa as imagens, eu quero esconder a divisão atual e mostrar a segunda div. Aqui está um pequeno trecho:

<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>

Eu criei um pequeno trecho de jQuery:

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

Agora, o problema não é apenas a criança atualmente pairada está oculta. Em vez disso, todas as outras crianças existentes também estão escondidas. Eu preciso de algo como "isto" ou "atual", mas não sei qual função jQuery é a certa. Qualquer ideia?

Obrigado, BJ

Answer 1

Eu encontrei a solução. Obrigado pessoal.

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

Answer 2

É isso que você está procurando?

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

Answer 3

Esta palavra -chave funciona bem:

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