JQuery each and on methods not working

Question

The goal is simple. When hover over mydiv (gray) the child div of inner should appear. I'm trying to write code for that but the best I can come up with is showing all inner divs. Only the child inner div should appear. Please help me with the code for this, I will appreciate it, thank you :)

https://jsfiddle.net/wyeqgfjz/#&togetherjs=6wNtokkegm

HTML:

<div class="mydiv">
  <div class="inner"></div>
</div>

<div class="mydiv">
  <div class="inner"></div>
</div>

CSS:

.mydiv {
  background: #ccc;
  padding: 40px;
  margin-bottom: 40px;
}

.inner {
  background: red;
  padding: 40px;
}

jQuery:

var inner = $('.mydiv .inner'),
  mydiv = $('.mydiv');
inner.hide();
mydiv.each(function() {
  $(this).on('hover', function() {
    $(this).find(inner).toggle();
  });
});

adeneo · Accepted Answer · 2017-07-24 19:32:37Z

3

There is no hover event, the events you want are mouseenter and mouseleave instead.
However, jQuery has a hover() method that combines the events for you.

Note that you don't have to use a loop, jQuery iterates internally for you.

var inner = $('.mydiv .inner'),
    mydiv = $('.mydiv');
    
inner.hide();

mydiv.hover(function() {
  $(this).find(inner).toggle();
});

.mydiv {
  background: #ccc;
  padding: 40px;
  margin-bottom: 40px;
}

.inner {
  background: red;
  padding: 40px;
}

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

<div class="mydiv">
  <div class="inner"></div>
</div>

edited Jul 24, 2017 at 19:32

answered Jul 24, 2017 at 19:26

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

empiric Over a year ago

using the variable inner will actually work in this instance: example

adeneo Over a year ago

@empiric - indeed it does, jQuery does some magic to filter the collection it seems.

empiric Over a year ago

I wasn't sure about that either because of the initial selector. It is probably good to keep that in mind in case one encounters weird side effects

adeneo Over a year ago

It's in the documentation for find, I looked it up before editing the answer. It was added in 1.6, and it does filter the passed in collection so as to work the same as a string selector.

charlietfl · Accepted Answer · 2017-07-24 19:34:46Z

2

No need to use script for this at all. Can do it with css alone by using :hover pseudo selector

.mydiv {
  background: #ccc;
  padding: 40px;
  margin-bottom: 40px;
}

.inner {
  background: red;
  padding: 40px;
  display:none;
}

.mydiv:hover .inner {
  display:block
}

<div class="mydiv">
  <div class="inner"></div>
</div>

<div class="mydiv">
  <div class="inner"></div>
</div>

answered Jul 24, 2017 at 19:34

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

JQuery each and on methods not working

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related