Grow your CSS skills. Land your dream job.

Trying to add another addClass(); when element is clicked in jQuery

  • # December 20, 2012 at 7:54 pm

    See how when you hover over the boxes, they turn blue; as well as the rounded rectangle with the number in it. Then, if you click “Google”, a menu drops down and the box on top stays blue, but the rounded rectangle with the number inside does not.

    https://dl.dropbox.com/u/55017445/Stock/index.html#

    (P.S. sorry for the weird id and class names)

    # December 20, 2012 at 8:29 pm

    I think you’re going about it wrong. Instead of changing `.val-google` to `.active-google` you could just focus on the parent class/hover state. Change all of the values to just have a common class like ‘.value’, then you you can change the style of it based on its parent:

    .li:hover .value, .this-item-is-dropped-down .value {
    /* styles */
    }

    In fact, you should be removing the majority of jQuery that you’re using. Let’s see if I can whip up a quick Pen…

    # December 20, 2012 at 8:32 pm

    Ohh, I see! I just started learning jQuery and implementing it into simple projects like this.

    # December 20, 2012 at 8:46 pm

    I removed a bunch of code: http://codepen.io/ggilmore/pen/GaJcK

    It’s not perfect, but it should show you how you can continue.

    You also had some bad practices going on with your list items by having the `` wrapping the `

  • `, it should be the other way around.
# December 20, 2012 at 9:01 pm

@TheDoc Hey, the JS was accidentally deleted when I tried to copy it, can you do that part again, please? Thank you so much for you time helping me!

# December 21, 2012 at 12:07 am

If you go to the link I posted above it should be there.

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".