How to show/hide the same blocks inside similar blocks with JQuery

Question

Code as follows:

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

Forward to help. Thanks!

Answer 1

If you're asking how to only hide the ".son" blocks inside each ".mama" block, then it'd be something like this:

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

Answer 2

if all you're doing is showing or hiding content, you don't need jQuery. CSS already has this functionality

 .mama .son {
      display:none;
 }

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

Answer 3

Use the hover() event and just scope your actions to the relevant elements:

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

There are many variations on how you can limit this to only children of the affected element.