Grow your CSS skills. Land your dream job.

Jquery hover problem

  • # December 22, 2012 at 11:03 pm

    Hey Guys,

    I’m having a problem figuring out how to separate the hover over between my divs, see:
    http://jameskape.com/test/

    currently when you hover over one, it affects every div and I can’t figure out how to fix it without creating a new script for every div….

    Any ideas? Greatly appreciated.

    Cheers

    J

    # December 23, 2012 at 1:04 am

    For the hover, target ‘.boxhover’ rather than ‘.boxonly’

    Then, use the jQuery selector “this” to target ONLY the .boxhover element that is being hovered over.

    #### Original Code
    $(‘.boxonly’).hover(function() {
    $(‘.boxhover’).stop().animate({ “opacity”: .6 },{ duration: 250 });
    }, function() {
    $(‘.boxhover’).stop().animate({ “opacity”: 0 },{ duration: 400 });
    });
    });

    #### New Code
    $(‘.boxhover’).hover(function() {
    $(this).stop().animate({ “opacity”: .6 },{ duration: 250 });
    }, function() {
    $(this).stop().animate({ “opacity”: 0 },{ duration: 400 });
    });
    });

    Codepen showing this

    http://codepen.io/jessecfisher/pen/shtmD

    # December 23, 2012 at 3:16 pm

    Thanks so much! Works a charm. I spent hours researching this…. and just couldnt find an answer.

    Cheers
    J

    # December 23, 2012 at 6:15 pm

    Hey there again,
    so it works a charm in a new test… But I can’t get it working in the frame work of my site, I think there is something in my css preventing it from working… But I can’t figure out what.

    For some reason the divs aren’t clickable…. and don’t register that you are hovering over them .

    I’ve re:uploaded a new version to http://jameskape.com/test/

    If you could have a quick look that be awesome.

    Cheers

    J

    # December 24, 2012 at 1:37 pm

    I figured it out :)

    New CSS

    #intro { z-index: 1; }
    .boxonly { z-index: 0; }

    Also, I am getting an error on the page

    Failed to load resource http://127.0.0.1:8080/s/css/IPLmRLYR6AL9inGgn9VkI9+qb1s/jameskape.com/21408.css

    # December 24, 2012 at 1:39 pm

    @jameskape – Completely unrelated to your problem, but you should hook that up with some http://placekitten.com/

    # December 24, 2012 at 3:27 pm

    Use jquery this to select the current element that is being targeted.
    Should work fine.

    # December 24, 2012 at 9:41 pm

    Haha, Andy unleash… Amazing!

    Thanks so much Hot pink! That fixes everything.

    Merry christmas. Thanks so much.

    Cheers
    J

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

You must be logged in to reply to this topic.

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