Comment puis-je cibler l'enfant d'un parent spécifique avec un effet de survol en utilisant jQuery ?

Question

Je cherche à savoir comment modifier ce code jQuery pour que seul le parent survolé affiche son enfant. Pour le moment, tous les enfants s'affichent lorsque n'importe quel parent est survolé.

Toute aide est grandement appréciée.

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

Answer 1

En passant le contexte en tant que second argument

Contexte du sélecteur
Par défaut, les sélecteurs effectuent leurs recherches dans le DOM en commençant à la racine du document. Cependant, un contexte alternatif peut être donné pour la recherche en utilisant le deuxième paramètre optionnel de la fonction $().

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

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

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

});

Démonstration en fonctionnement

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

Solution CSS uniquement

.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;
}

Answer 2

Il vous suffit de parcourir l'enfant direct en utilisant $(this).find(".child") comme suit :

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

DEMO

Ou, simplement en utilisant toggleClass() :

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

DEMO

Answer 3

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

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

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

});

Answer 4

Vous devez changer votre code comme suit:

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

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

});