CODEWITHSUNDEEP
javascripthtmljquerycss
The Dead Man
The Dead Man

Reputation: 5566

On hover display another div using Jquery / Javascript

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 enter image description here

Upvotes: 0

Views: 41

Answers (2)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

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>

Upvotes: 2

Greedo
Greedo

Reputation: 3549

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>

Upvotes: 2

Related Questions