- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › Script Selecting Everything
Hey there,
I was wondering if someone could point me in the right direction.
I’ve made [this](http://iceukltd.com/case-studies/) 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
The jQuery code i have so far is,
$(‘.case-study img’).hover(
function () {
$(‘.box’).slideDown(300);
},
function () {
$(‘.box’).slideUp(300);
});
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.
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);
});
or this (looks a bit more readable to me)
$(‘.case-study’).hover(
function () {
$(this).find(‘.box’).slideDown(300);
},
function () {
$(‘.box’).slideUp(300);
});
@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