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），我可能会建议您通过启动一个隐藏的子项然后使用{来简化这一点{1}}：

.toggle()

如何获取jquery函数只影响'this'的子元素

1 个答案: