Show div with Jquery on hover with multiple class

Question

I would like to show one div2 slowly when I hover a div1 associated in the same div. I do not see where the problem is in my jquery...

$(".div").hover(function() {

  $(this).find(".div2").animate({
    opacity: "1"
  }, {
    queue: false
  });
}, function() {
  $(this).find(".div2").animate({
    opacity: "0"
  }, {
    queue: false
  });
});

.div2 {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div>
    <div class="div1">
    </div>
    <div class="div2">
    </div>
  </div>
  <div>
    <div class="div1">
    </div>
    <div class="div2">
    </div>
  </div>
  <div>
    <div class="div1">
    </div>
    <div class="div2">
    </div>
  </div>
</div>

.div doesn't exist. Try $("div") instead. Also, if you only want to show the .div2 directly after a .div1 then you could use CSS for this. Info: developer.mozilla.org/en-US/docs/Web/CSS/… — sol
– sol, Commented Oct 10, 2017 at 13:53

Gorka Hernandez · Accepted Answer · 2017-10-10 13:59:20Z

You are targeting $('.div') and not $('.div1') or $('div'). There is no element with class .div in your code, so this is probably a typo.

You also have to change .find() to .next() if you want to trigger the event when hovering over a '.div1' element, since you want to target the next sibling, and not a child.

Here's a working sample you can go by:

https://jsbin.com/vipifolahe/edit?html,js,output

HTML

<div>
    <div>
         <div class="div1">
         </div>
         <div class="div2">
         </div>
    </div>
    <div>
         <div class="div1">
         </div>
         <div class="div2">
         </div>
    </div>
    <div>
         <div class="div1">
         </div>
         <div class="div2">
         </div>
    </div>
</div>

CSS

.div1 {
  height: 50px;
  background-color: red;
}

.div2 {
  height: 50px;
  background-color: green;
}

.div2 {
  opacity: 0;
}

JS

$(".div1").hover(function () {

  $(this).next(".div2").animate({
    opacity: "1"
  }, {
    queue: false
  });
}, function () {
  $(this).next(".div2").animate({
    opacity: "0"
  }, {
    queue: false
  });
});

If you want to trigger the event when the parent div is hovered over, it could look like so:

HTML

<div>
    <div class="parent">
         <div class="div1">
         </div>
         <div class="div2">
         </div>
    </div>
    <div class="parent">
         <div class="div1">
         </div>
         <div class="div2">
         </div>
    </div>
    <div class="parent">
         <div class="div1">
         </div>
         <div class="div2">
         </div>
    </div>
</div>

JS

$(".parent").hover(function () {

  $(this).find(".div2").animate({
    opacity: "1"
  }, {
    queue: false
  });
}, function () {
  $(this).find(".div2").animate({
    opacity: "0"
  }, {
    queue: false
  });
});

Güney Saramalı · Accepted Answer · 2017-10-10 13:55:50Z

1

The Demo is Here

JS Code

 $(document).ready(function(){
  $('.div1').mouseenter(function(){
    $(this).next('.div2').css('opacity','1');
  });
  $('.div1').mouseleave(function(){
    $(this).next('.div2').css('opacity','0');
  });
});

answered Oct 10, 2017 at 13:55

Güney Saramalı

8091 gold badge12 silver badges19 bronze badges

Comments

sol · Accepted Answer · 2017-10-10 14:00:22Z

1

If you are open to a CSS only solution you can use the sibling selector

.div2 {
  opacity: 0;
}

.div1, .div2 {
  border: 3px solid pink;
  width: 50px;
  height: 50px;
}

.div1:hover + .div2 {
  opacity: 1;
}

<div>
  <div>
    <div class="div1">
    </div>
    <div class="div2">
    </div>
  </div>
  <div>
    <div class="div1">
    </div>
    <div class="div2">
    </div>
  </div>
  <div>
    <div class="div1">
    </div>
    <div class="div2">
    </div>
  </div>
</div>

answered Oct 10, 2017 at 14:00

sol

23k6 gold badges46 silver badges62 bronze badges

Comments

Andrzej Smyk · Accepted Answer · 2017-10-10 13:56:36Z

You have no such element with class div, so you are not selecting any of the divs. To each div wrapping up divs to hover, add class that will binds handlers for both mouseenter and mouseleave events. Please see snippet below:

$(".wrapper").hover(function () {
    $(this).find(".div2").animate({
        opacity: "1"
    }, {
        queue: false
    });
}, function () {
    $(this).find(".div2").animate({
        opacity: "0"
    }, {
        queue: false
    });
});

.div2 {
    opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div class="wrapper">
         <div class="div1">one
         </div>
         <div class="div2">one hidden
         </div>
    </div>
    <div>
         <div class="div1">two
         </div>
         <div class="div2">two hidden
         </div>
    </div>
    <div>
         <div class="div1">three
         </div>
         <div class="div2">three hidden
         </div>
    </div>
</div>

Collectives™ on Stack Overflow

Show div with Jquery on hover with multiple class

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related