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

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

like this jsfiddle.net/wjcdpo0b ? $('.box-children',this) -> this refers to the .box you have clicked on and that will search for .box-children inside this — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Oct 12, 2020 at 13:42
@CarstenLøvboAndersen yes exactly dude that was hella quick !!! holy shit — The Dead Man
– The Dead Man, Commented Oct 12, 2020 at 13:44
@0stone0 Well I could but I'm not always a fan about copying code from fiddle to SO and there will most likely be someone else posting the answer. As you can see someone else just did. — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Oct 12, 2020 at 13:47

Bhushan Kawadkar · Accepted Answer · 2020-10-12 13:55:21Z

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>

Greedo · Accepted Answer · 2020-10-12 13:45:57Z

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>

Collectives™ on Stack Overflow

On hover display another div using Jquery / Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related