Как я могу нацелить ребенка указанного c родителя с эффектом наведения, используя jQuery?

Question

Я пытаюсь выяснить, как отредактировать этот код jQuery, чтобы только родитель, находящийся в поиске, показывал своего потомка. На данный момент все дети показаны, когда кто-либо из родителей находится под охраной.

Любая помощь очень ценится.

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

Вам просто нужно перевести прямого ребенка с помощью $(this).find(".child"), например:

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

DEMO

Или просто с помощью toggleClass():

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

DEMO

Answer 2

Передавая контекст в качестве второго аргумента

Контекст селектора По умолчанию селекторы выполняют поиск в DOM, начиная с документа root. Однако альтернативный контекст может быть задан для поиска с помощью необязательного второго параметра функции $ ().

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

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

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

});

Рабочая демоверсия

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

CSS Только решение

.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 3

вам нужно изменить свой код следующим образом:

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

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

});

Answer 4

использование $(this).find(".child").addClass("hover");

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

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

});