Comment afficher/masquer les mêmes blocs à l'intérieur des blocs similaires avec JQuery

Question

Code comme suit:

<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(); 
    } 
); 

avant pour aider. Merci!

Answer 1

Utilisez le cas hover() et la portée que vos actions aux éléments pertinents:

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

Il y a beaucoup de variations sur la façon dont vous pouvez limiter à seuls les enfants de l'élément concerné .

Answer 2

Si vous vous demandez comment cacher que les blocs « .SON » à l'intérieur de chaque bloc « .mama », alors ce serait quelque chose comme ceci:

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

Answer 3

si tout ce que vous faites est afficher ou cacher du contenu, vous n'avez pas besoin de jQuery. CSS a déjà cette fonctionnalité

.mama .son { 
     display:none; 
} 

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