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

Posted 2023-05-08

【中文标题】jQuery：悬停时显示和隐藏子div

【英文标题】：jQuery: Show and hide child div when hovering

【发布时间】：2011-02-08 06:43:56

【问题描述】：

我有一套物品。每个项目都有两个图像和一些文本。对于图像，我创建了一个父 div，它有一个溢出：隐藏的 CSS 值。我想实现鼠标悬停效果。一旦您将鼠标悬停在图像上，我想隐藏当前 div 并显示第二个 div。这是一个小sn-p：

<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 sn-p：

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

【参考方案1】：

我找到了解决方案。谢谢各位。

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

【参考方案2】：

这是你要找的吗？

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

【讨论】：

感谢两位的回答。 @Sarfraz：您的解决方案很好，但图像闪烁。我们必须处理父 div .product-images。有什么想法吗？

@Björn：您可以将图像放在一个 div 中，并为该 div 指定特定的宽度和高度。

@Safraz：我按照你的建议做了。但它仍然无法正常工作。如果你不想看heimatkiosk.com/jena/fashion - 请看前两张图片...

【参考方案3】：

这个关键字很好用：

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