jQuery：当悬停时显示和隐藏子div

Question

我有一组项目。每个项目都有两张图片和一些文本。对于这些图片，我创建了一个父div，其中包含了一个overflow:hidden的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

- Björn von TRITUM

Answer 1

我已经找到了解决方案。谢谢大家。

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

- Björn von TRITUM

Answer 2

这是你要找的吗？

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

- Sarfraz

---

感谢两位的回答。@Sarfraz：你的解决方案很好，但是图片在闪烁。我们必须处理父级div .product-images。有什么想法吗？ - Björn von TRITUM

@Björn：你可以将你的图片放在一个 div 中，并给这个 div 指定宽度和高度。 - Sarfraz

@Safraz：我按照你的建议进行了操作。但还是不起作用。如果你想看一下，请点击http://heimatkiosk.com/jena/fashion - 查看前两张图片... - Björn von TRITUM

Answer 3

这个关键字运行良好：

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

- Peeter