On hover display another div using Jquery / Javascript

Question

I have a section in which on hover on a parent div I want to display a children div (element) , so here is

JSFIDDLE: live demo

Here is HTML

<div class="flex-container">
  <div class="box">1
        <span class="box-children">Children Div</span>
  </div>
  <div class="box">2
          <span class="box-children">Children Div</span>
  </div>
  
  <div class="box">3
          <span class="box-children">Children Div</span>

  </div>
  <div class="box">4
          <span class="box-children">Children Div</span>

  </div>
  <div class="box">5
          <span class="box-children">Children Div</span>

  </div>
  <div class="box">6
          <span class="box-children">Children Div</span>

  </div>
</div>

Here is JS

$(document).ready(function() {    
    console.log('init') 
    $('.box').hover(function(){     
        $('.box-children').addClass('open');    
    },     
    function(){    
        $('.box-children').removeClass('open');     
    });
});   

EXPECTED:

On the hover parent element, it should display the children element

Unfortunately now on hover, it displays all children element

Answer 1

You can use this in a callback to reference the trigger element (in this case, the parent):

 $(document).ready(function() { console.log('init') $('.box').hover(function(){ $(this).find('.box-children').addClass('open'); }, function(){ $(this).find('.box-children').removeClass('open'); }); });

 .box-children { display: none; } .box-children.open { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="flex-container"> <div class="box">1 <span class="box-children">Children Div</span> </div> <div class="box">2 <span class="box-children">Children Div</span> </div> <div class="box">3 <span class="box-children">Children Div</span> </div> <div class="box">4 <span class="box-children">Children Div</span> </div> <div class="box">5 <span class="box-children">Children Div</span> </div> <div class="box">6 <span class="box-children">Children Div</span> </div> </div>

Answer 2

you can make use of 'mouseenter' and 'mouseleave' events and toggle required CSS classes to show / hide children div. Use this to find the correct children div.

See below code

 $(document).ready(function() { console.log('init'); //hide all children on page load $('.box-children').addClass('close'); $('.box').on('mouseenter', function(){ $(this).find('.box-children').toggleClass('open close'); }); $('.box').on('mouseleave', function(){ $(this).find('.box-children').toggleClass('open close'); }); });

 .open {display: block;} .close {display: none;} .box {border: 1px solid red;} .box-children {border: 1px solid green;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="flex-container"> <div class="box">1 <span class="box-children">Children Div</span> </div> <div class="box">2 <span class="box-children">Children Div</span> </div> <div class="box">3 <span class="box-children">Children Div</span> </div> <div class="box">4 <span class="box-children">Children Div</span> </div> <div class="box">5 <span class="box-children">Children Div</span> </div> <div class="box">6 <span class="box-children">Children Div</span> </div> </div>