如何顯示/隱藏相似的塊內的相同的塊用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

使用hover()事件，只是範圍的行動的相關要素：

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

有關於如何限制這只是受影響的元素的兒童許多變化。

Answer 2

如果你問如何只隱藏每個「.mama」塊裏面的「.son」塊，那麼它會是這樣的：

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

Answer 3

如果你正在做的是顯示或隱藏內容，你不需要jQuery。 CSS已經有這個功能

.mama .son { 
     display:none; 
} 

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