Using jQuery on the select class not all the divs with the same class

Question

Not really sure how to phrase that in the title. Anyways, what I'm saying is that I have three divs with the same class name. I want to add a mouseover function that only works on the select div, not all of them at once. For example :(https://jsfiddle.net/1y2jw2y0/) this makes all the divs show/hide, I only want the selected one to act on the jQuery function.

Html:

<div class="box">
  <p class="show">Show</p>
  <p class="hide">hide</p>
</div>

<div class="box">
  <p class="show">Show</p>
  <p class="hide">hide</p>
</div>

<div class="box">
  <p class="show">Show</p>
  <p class="hide">hide</p>
</div>

Css:

.box {
  display: inline-block;
  width: 150px;
  height: 150px;
  border: 1px solid #000;
}

.hide {
  display: none;
}

jQuery:

$(document).ready(function() {
  $('.box').mouseover(function() {
    $('.hide').show();
    $('.show').hide();
  });
  $('.box').mouseleave(function() {
    $('.hide').hide();
    $('.show').show();
  });
});

Answer 1

Use this to target the "selected" element, then select the child with find() or children():

$(document).ready(function() {
  $('.box').mouseover(function() {
    $(this).children('.hide').show();
    $(this).children('.show').hide();
  });
  $('.box').mouseleave(function() {
    $(this).children('.hide').hide();
    $(this).children('.show').show();
  });
});

JSFiddle Demo

Edited, to outline the performance issues brought up:

For basic details about the difference between find and children, this answer is a good resource.

In this case, I found .find() to be faster as a whole, usually ~.2ms.

After extensive testing, It appears there is very little, or no difference between using find(), or using $('.selector', this)

Overall, the results were similar. In some cases, it appears $('.selector', this) is slower, in others find().

However, find does give you extra functionality that cannot be achieved with $('.selector', this), such as a direct child selector: .selector > .anotherone, or caching the jQuery object to save resources.

Summary: There isn't much difference, it all depends on your case, and what you prefer.

Answer 2

You can do it all in CSS:

.box:hover .hide {
  display: block;
}

.box:hover .show {
  display: none;
}

Example: http://jsfiddle.net/Zy2Ny/

If you really want to do it in JavaScript, simply use $(this) and find():

More information about whether children() or find() is faster.

$(".box").mouseover(function() {
    $(this).find(".hide").show();
    $(this).find(".show").hide();
});

$(".box").mouseleave(function() {
    $(this).find(".hide").hide();
    $(this).find(".show").show();
});

.box {
  display: inline-block;
  width: 150px;
  height: 150px;
  border: 1px solid #000;
}

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxes">

  <div class="box">
    <p class="show">Show</p>
    <p class="hide">Hide</p>
  </div>

  <div class="box">
    <p class="show">Show</p>
    <p class="hide">Hide</p>
  </div>

  <div class="box">
    <p class="show">Show</p>
    <p class="hide">Hide</p>
  </div>
  
</div>

Example: https://jsfiddle.net/1y2jw2y0/5/