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

发布于 2024-08-29 03:48:51 字数 746 浏览 8 评论 0原文

我有一套物品。每个项目都有两个图像和一些文本。对于图像，我创建了一个父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 函数是正确的。有什么想法吗？

谢谢，北京

原文

I've got a set of items. Each item has two images and some text. For the images I've created a parent div which has a overflow:hidden CSS value. I want to achieve a mouseover effect. As soon as you hover over the images I want to hide the current div and show the second div. Here's a tiny snippet:

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

I've created a small jQuery snippet:

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

Now the problem is not only the currently hovered child is hidden. Instead, all other existing children are hidden as well. I need something like "this" or "current" but I don't know which jQuery function is the right one. Any idea?

Thanks, BJ

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

有木有妳兜一样 2024-09-05 03:48:51

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

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

I've found the solution. Thank you guys.

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

回复收藏 0 原文

天冷不及心凉 2024-09-05 03:48:51

这是您要找的吗？

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

Is this what you are looking for?

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

回复收藏 0 原文