Grow your CSS skills. Land your dream job.

[How]When hovering on a child div the main div changes color.

  • # March 24, 2013 at 8:20 pm

    So i want to make when you hover over the #prvi div the #main changes it’s background color.

    I tried something like this:

    #prvi:hover #main{
    background-color:#d5F986;
    }

    But that doesn’t work. Here is the[ codepen](http://codepen.io/markomarkogame/pen/DyIvo “codepen”).

    # March 24, 2013 at 8:31 pm

    What you need is a parent selector, which doesn’t exist yet. You can do it with jQuery though.

    # March 24, 2013 at 8:42 pm

    So it was done in jQuery [here](http://www.codeschool.com/ “here”) ? (the Paths sections)

    Since I’m no good in jQuery i might as well give up on this ..

    # March 25, 2013 at 3:30 am

    Ugly way to do it, with Javascript. I’m sure there are more elegant solutions.

    [http://codepen.io/Krish1980/pen/Dmevp](http://codepen.io/Krish1980/pen/Dmevp “”)

    # March 25, 2013 at 6:19 am

    Yes, on that site they use JS (didn’t check if it is jQuery, but probably it is) to add classes like `path-ruby` to the container.

    Here is how it can be done using jQuery: http://codepen.io/CrocoDillon/pen/tqEfh

    @Krish1980, you’re removing all other classes from the parent div like `.parent`. That’s why I like jQuery so much, functions like `addClass` and `removeClass` automatically keep the other classes :)

    # March 25, 2013 at 11:09 am

    Wow cool stuff guys.

    @CrocoDillon nice fade in and out I was wondering where could i learn to do something like this, looks simple.

    # March 25, 2013 at 4:48 pm

    Anyone ? Any link to point me how to do this kind of stuff, nothing complicated ?

    # March 25, 2013 at 5:16 pm

    Start by learning [JavaScript](https://developer.mozilla.org/en-US/docs/JavaScript/Guide), then move on to (or skip to if you don’t feel like reading all that) [jQuery](http://try.jquery.com/). I haven’t really tried the last link yet but it seems rather easy with videos and exercises.

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