jQuery：悬停时显示和隐藏子div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2643731/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: Show and hide child div when hovering
提问by Bj?rn von TRITUM
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，它有一个 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>
I've created a small jQuery snippet:
我创建了一个小的 jQuery 片段：
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?
现在的问题不仅是当前悬停的孩子被隐藏了。相反，所有其他现有子项也被隐藏。我需要诸如“this”或“current”之类的东西，但我不知道哪个 jQuery 函数是正确的。任何的想法？
Thanks, BJ
谢谢，BJ
回答by Bj?rn von TRITUM
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();
});
});
回答by Sarfraz
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();
});
});
回答by Peeter
This keyword works fine:
这个关键字工作正常：
$(this).hide();
$(this).show();
