jQuery:在悬停时显示和隐藏子div

Question

我有一套物品.每个项目都有两个图像和一些文本.对于图像,我创建了一个父div,它有一个溢出:隐藏的CSS值.我想实现鼠标悬停效果.只要将鼠标悬停在图像上,我就想隐藏当前的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();
    });
});

现在问题不仅是当前徘徊的孩子被隐藏了.相反,所有其他现有的孩子也被隐藏.我需要像"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();
    });
});