How can I target child of specific parent with hover effect using jQuery?

Question

I'm trying to find out how to edit this jQuery code so that only the parent that is hovered shows its child. At the moment, all the children are shown when any parent is hovered.

Any help much appreciated.

jsFiddle

jQuery(document).ready(function($) { 
  $(".parent").hover(
    function () {
      $(".child").addClass("hover");
    },
    function () {
      $(".child").removeClass("hover");
    }
  );
});

.parent {
  position:relative;
  width:100px;
  height:100px;
  background:red;
  display:inline-block;
  float:left;
  margin-right:6px;
}

.child {
  width:inherit;
  height:30px;
  position:absolute;
  bottom:0;
  background-color:blue;
  opacity:0;
  transition:0.5s;
}

.child.hover {
  opacity:1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div class="child">
  </div>
</div>


<div class="parent">
  <div class="child">
  </div>
</div>

<div class="parent">
  <div class="child">
  </div>
</div>

Answer 1

By passing the the context as second argument

Selector Context
By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function.

https://api.jquery.com/jQuery/#jQuery1

jQuery(document).ready(function($) {

  $(".parent").hover(
    function() {
      $(".child", this).addClass("hover");
    },
    function() {
      $(".child", this).removeClass("hover");
    }
  );

});

Working demo

https://jsfiddle.net/aswinkumar863/a4sxc1up/

CSS Only Solution

.parent {
  position: relative;
  width: 100px;
  height: 100px;
  background: red;
  display: inline-block;
  float: left;
  margin-right: 6px;
}

.child {
  width: inherit;
  height: 30px;
  position: absolute;
  bottom: 0;
  background-color: blue;
  opacity: 0;
  transition: 0.5s;
}

.parent:hover .child {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="parent">
  <div class="child">
  </div>
</div>

<div class="parent">
  <div class="child">
  </div>
</div>

<div class="parent">
  <div class="child">
  </div>
</div>

Answer 2

You just need to transverse the direct child by using $(this).find(".child") like:

$(".parent").hover(
  function() {
     $(this).find(".child").addClass("hover");
  },
  function() {
     $(this).find(".child").removeClass("hover");
  }
);  

DEMO

Or, simply using toggleClass():

$(".parent").hover(function() {
   $(this).find(".child").toggleClass("hover");
});

DEMO

Answer 3

use $(this).find(".child").addClass("hover");

jQuery(document).ready(function($) {    

$(".parent").hover(
  function () {
    $(this).find(".child").addClass("hover");
  },
  function () {
    $(".child").removeClass("hover");
  }
);

});

Answer 4

you need to change your code like that:

    jQuery(document).ready(function($) {    

    $(".parent").hover(
  function (e) {
    $(e.currentTarget).find(".child").addClass("hover");
  },
  function (e) {
    $(e.currentTarget).find(".child").removeClass("hover");
  }
);

});