jQuery: Show und Kind div verstecken, wenn Schweben

Question

Ich habe eine Menge von Elementen bekommt. Jedes Element hat zwei Bilder und etwas Text. Für die Bilder habe ich ein Elternteil div erstellt, die einen Überlauf hat: versteckt CSS Wert. Ich möchte ein Mouseover-Effekt zu erzielen. Sobald Sie schweben über die Bilder, die ich den zweiten div den aktuellen div und zeigen ausblenden möchten. Hier ist ein kleiner Auszug:

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

Ich habe eine kleine jQuery-Snippet erstellt:

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

Jetzt ist das Problem, nicht nur das zur Zeit schwebte Kind versteckt ist. Stattdessen werden alle anderen vorhandenen Kinder als auch versteckt. Ich brauche so etwas wie „das“ oder „aktuelle“ aber ich weiß nicht, welche jQuery-Funktion die richtige ist. Jede Idee?

Danke, BJ

Answer 1

Ich habe die Lösung gefunden. Danke Jungs.

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

Answer 2

Ist das, was Sie suchen?

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

Answer 3

Dieses Schlüsselwort funktioniert:

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