Grow your CSS skills. Land your dream job.

Script Selecting Everything

  • # November 6, 2012 at 2:16 pm

    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

    # November 7, 2012 at 11:46 am

    The jQuery code i have so far is,

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

    # November 7, 2012 at 2:16 pm

    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.

    # November 7, 2012 at 2:24 pm

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

    # November 8, 2012 at 3:58 am

    or this (looks a bit more readable to me)

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

    # November 8, 2012 at 8:54 am

    @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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".