Question

I building a simple (crude, in fact) gallery in html / twig, css and jquery. In the gallery I am trying to make a function that activates when the user hovers over an image. The function will fade-in a child div (that is hidden) and fade-out on when the user moves the cursor away from the div.

The problem I am running in to is that the function is not only affecting the child element, but also the parent (which I want to avoid).

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

How would I accomplish this?

Answer 1

I think you could use .children() for this:

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

Edit: After playing with this a bit in jsFiddle (ditching your CSS for the moment), I might suggest that you make this simpler by starting one child hidden and then using .toggle():

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