jquery - 如何让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);
});