5

我有一套物品。每个项目都有两个图像和一些文本。对于图像,我创建了一个父 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

4

3 回答 3

8

我找到了解决方案。谢谢你们。

jQuery(document).ready(function() {
    jQuery('.product-images').hover(function() {
        jQuery(this).find('img:first').hide()
    }, function() {
        jQuery(this).find('img:first').show();
    });
});
于 2010-04-15T15:05:02.720 回答
1

这是你想要的?

jQuery(document).ready(function() {
    jQuery('.product-images img').mouseover(function() {
        jQuery(this).parent().hide();
    }).mouseout(function() {
        jQuery(this).parent().show();
    });
});
于 2010-04-15T08:31:35.593 回答
-1

此关键字工作正常:

$(this).hide();
$(this).show();
于 2010-04-15T08:33:04.593 回答