Question

I have this markup x 3:

        <div class="features">
            <span class="overlay"><img src="img/webdesign.png" /></span>
            <h2>Web Design</h2>
            <p>Cow pig turkey, chuck sausage pork loin venison biltong shoulder. Shoulder pancetta short loin beef ribs, turkey corned beef shankle swine spare ribs pork chop hamburger beef brisket shank. Pork belly tenderloin brisket, strip steak ribeye bacon tail andouille shoulder t-bone flank venison chicken.</p>
        </div>

Span class overlay is positioned absolutely covering the h2 + P. I have three of these div class features. I’d like to use jQuery to when hovering over a features div, the overlay in that div alone slides up and when the user leaves the hover, slide the overlay div back down.

$(".features").hover(
  function () {
    $('.overlay').slideUp();
  },
  function () {
    $('.overlay').slideDown();
  }
);

I have this so far, but i’m very aware it doesnt work : )

Answer 1

Add thiscontext to the jquery selector function so that elements of class overlay are selected on within the DIV that is currently hovered.

Try this:

$(".features").hover(function() {     
    $('.overlay', this).slideUp();   
    }, function() {     
    $('.overlay', this).slideDown();   
});