Forums

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

Home Forums JavaScript Jquery hover problem

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #41541
    jameskape
    Participant

    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

    #118684
    hotpink
    Member

    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

    #118757
    jameskape
    Participant

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

    Cheers
    J

    #118784
    jameskape
    Participant

    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

    #118870
    hotpink
    Member

    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

    #118871
    Andy Howells
    Participant

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

    #118920
    jameskape
    Participant

    Haha, Andy unleash… Amazing!

    Thanks so much Hot pink! That fixes everything.

    Merry christmas. Thanks so much.

    Cheers
    J

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.