如何使用JQuery在类似的块内显示/隐藏相同的块

Question

代码如下：

<div class="mama">
    <div class="son">Item 1</div>
</div>
<div class="mama">
    <div class="son">Item 2</div>
</div>

$(".mama").hover(
    function() {
        $(".son").show();
    },
    function() {
        $(".son").hide();
    }
);

转发帮助。谢谢！

Answer 1

如果你问如何只隐藏每个“.mama”块中的“.son”块，那么它就是这样的：

$('.mama').each(function() {
  var mama = $(this);
  mama.hover(
    function() { mama.find('.son').show(); },
    function() { mama.find('.son').hide(); }
  );
});

Answer 2

如果你正在做的只是显示或隐藏内容，你不需要jQuery。 CSS已经具有此功能

 .mama .son {
      display:none;
 }

 .mama:hover .son {
      display:block;
 }

Answer 3

使用hover()事件，只需将您的操作定位到相关元素：

$("div.mama").hover(function() {
  $(this).find("div.son").show();
}, function() {
  $(this).find("div.son").hide();
});

如何将此限制仅限于受影响元素的子项，有很多变体。