jQueryの：表示と非表示の子divのホバリング

Question

私はアイテムのセットを持っています。各項目は、2枚の画像やテキストを持っています。隠されたCSS値：画像のために私はオーバーフローを持つ親のdivを作成しました。私は、マウスオーバー効果を実現したいです。すぐにホバー画像の上に、私は現在のdivを非表示にし、第二のdivを表示したいと。ここでは、小さなスニペットがあります：

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

私は小さなjQueryのスニペットを作成しました。

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

今の問題は、現在で推移子供が隠されているだけではありません。代わりに、他のすべての既存の子も同様に隠されています。私は「この」や「現在」のようなものを必要とするが、私は右の一つであるjQueryの機能を知りません。任意のアイデア？

おかげで、BJ

Answer 1

私は解決策を見つけました。君たちをありがとうございます。

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

Answer 2

これは何を探してるんですか？

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

Answer 3

このキーワード作品の罰金ます：

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