Forums

CameronDuthie

Hey there,

I was wondering if someone could point me in the right direction.

I've made this page that has block images and when the user rolls over an image an overlay slides up from the bottom.

The only problem is when the user rolls over one image, all the overlays slide up instead of just the one the users mouse is over.

Any help would be greatly appreciated.

Many Thanks,

Cameron

CameronDuthie

The jQuery code i have so far is,

$('.case-study img').hover(
function () {
    $('.box').slideDown(300);
},
function () {
    $('.box').slideUp(300);

});

pmac627

Try this. http://codepen.io/Pmac627/pen/baHCv

You have 6 items using 1 class as a reference. Add an ID to each block and reference both to get only one to act up at a time.

TheDoc

IDs don't make this simple, what you want is this:

  $('.case-study img').hover( function () {
      $(this).parents('.case-study').find('.box').slideDown(300);
  }, function () {
      $(this).parents('.case-study').find('.box').slideUp(300);
  });

JoniGiuro

or this (looks a bit more readable to me)

  $('.case-study').hover(
      function () {
          $(this).find('.box').slideDown(300);
      },
      function () {
          $('.box').slideUp(300);
  });

CameronDuthie

@pmac627 i did wonder about ID but i think it would cause complications for future implementations. But thanks for taking the time to respond.

Thanks @TheDoc and @JoniGiuro both your solutions worked a treat!

Many Thanks

treehouse : what would you like to learn today?

Forums

[Solved] Script Selecting Everything