jquery - jQuery: ホバリング時に子 div を表示および非表示にする

Question

アイテムを揃えました。各アイテムには 2 つの画像といくつかのテキストがあります。画像については、overflow:hidden CSS 値を持つ親 div を作成しました。マウスオーバー効果を実現したい。画像にカーソルを合わせるとすぐに、現在の div を非表示にして 2 番目の 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();
    });
});

問題は、現在ホバリングされている子が非表示になっているだけではありません。代わりに、他のすべての既存の子も非表示になります。"this" や "current" のようなものが必要ですが、どの 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();