jQuery: Afficher et masquer les enfants div en survolant

Question

J'ai un ensemble d'éléments. Chaque élément a deux images et du texte. Pour les images, j'ai créé un div parent qui a un débordement: valeur CSS cachée. Je veux réaliser un effet mouseover. Dès que vous passez la souris sur les images, je veux masquer la div actuelle et afficher la seconde div. Voici un petit extrait:

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

J'ai créé un petit extrait jQuery:

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

Maintenant, le problème est non seulement l'enfant est actuellement plané caché. Au lieu de cela, tous les autres enfants existants sont également cachés. J'ai besoin de quelque chose comme "this" ou "current" mais je ne sais pas quelle fonction jQuery est la bonne. Une idée?

Merci, BJ

Answer 1

J'ai trouvé la solution. Merci les gars.

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

Answer 2

Est-ce ce que vous cherchez?

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

Answer 3

Ce mot-clé fonctionne très bien:

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