Как получить функцию jquery, которая влияет только на дочерний элемент this

Question

Я строю простую (на самом деле, сырую) галерею в html / twig, css и jquery. В галерее я пытаюсь сделать функцию, которая активируется, когда пользователь наводит курсор на изображение. Функция будет добавлять дочерний элемент div (то есть скрытый) и постепенно исчезать, когда пользователь отводит курсор от элемента div.

Проблема, с которой я сталкиваюсь, заключается в том, что функция влияет не только на дочерний элемент, но и на родительский элемент (которого я хочу избежать).

JQuery:

$(".gallery_image_wrapper").hover(function(){
    $(this).find(':last-child').fadeOut(100);
    $(this).find(':first-child').fadeIn(500);
});

html / twig (symfony)

<div class="gallery_image_wrapper">
      <div class="gallery_image">
          <a href="#">
              <img src="/web/images/pieceimages/{{ image.path }}" />
          </a>
      </div>
      <div class="gallery_mouseover">
          <div class="gallery_piece_info" align="center">
              <span class="gallery_info_title">
                  {{ image.pieceTitle }}
              </span>
              <br />
              <span class="gallery_info_artist">
                  {{ image.artistName }}
              </span>
              <br />
              <br />
              <span class="gallery_info_more">
                  Learn More
              </span>
          </div>
     </div>
</div>

CSS

.gallery_image_wrapper {
      float: left;
      position: relative;
      margin: 10px;
 }
 .gallery_mouseover {
      height: 100%;
      width: 100%;
      background-image: url({{ asset('/web/images/mouseover.png') }});
      position: absolute;
      top: 0px;
 }
 .gallery_piece_info {
      color: #ffffff;
      margin-left: auto;
      margin-right: auto;
      text-transform: uppercase;
      margin-top: 30%;
 }
 .gallery_info_title {
      font-size: 16pt;
      font-family: "Giacomo";
 }
 .gallery_info_artist {
      font-size: 12pt;
      font-family: "Giacomo Light";
 }
 .gallery_info_more {
      font-size: 9pt;
      font-family: "Giacomo Light";
 }

Как мне это сделать?

Answer 1

Я думаю, вы могли бы использовать .children() для этого:

$(".gallery_image_wrapper").hover(function(){
    $(this).children(':last-child').fadeOut(100);
    $(this).children(':first-child').fadeIn(500);
});

Редактировать: После игры с этим немного в jsFiddle (отказ от вашего CSS длямомент), я мог бы предложить, чтобы вы упростили это, начав скрывать одного ребенка, а затем используя .toggle():

$(".gallery_image_wrapper").hover(function(){
        $(this).children().toggle(100);
});