CODEWITHSUNDEEP
jqueryhtmlcss
Jack Averill
Jack Averill

Reputation: 851

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

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>

Upvotes: 3

Views: 1057

Answers (4)

User863
User863

Reputation: 20039

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>

Upvotes: 2

sajadre
sajadre

Reputation: 1181

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");
  }
);

});

Upvotes: 1

Khaled Alam
Khaled Alam

Reputation: 905

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

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

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

});

Upvotes: 1

palaѕн
palaѕн

Reputation: 73966

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

Upvotes: 2

Related Questions