Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Script Selecting Everything

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #40651
    CameronDuthie
    Participant

    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

    #113567
    CameronDuthie
    Participant

    The jQuery code i have so far is,

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

    #113578
    pmac627
    Participant

    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.

    #113579
    TheDoc
    Member

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

    #113622
    JoniGiuro
    Participant

    or this (looks a bit more readable to me)

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

    #113646
    CameronDuthie
    Participant

    @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)
  • The forum ‘JavaScript’ is closed to new topics and replies.