The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

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:

    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.



    # 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

    # December 23, 2012 at 3:16 pm

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


    # 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

    If you could have a quick look that be awesome.



    # 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

    # December 24, 2012 at 1:39 pm

    @jameskape – Completely unrelated to your problem, but you should hook that up with some

    # December 24, 2012 at 3:27 pm

    This reply has been reported for inappropriate content.

    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.


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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed