Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Martin H
Martin H
986 Points

CSS div background color change on hover

Hey,

I've been messing around with this for few hours now... I have a div and when I click an icon on this div, background color of this whole div should change. I was looking on codepen and other sites, but nothing is so similar for me to understand and reproduce without jquery. Icons are changed to font.

```html
    <div class="footer">
    <div class="icons">
        <a href="#"><div class="ikon" data-icon="b"></div></a>
        <a href="#"><div class="ikon" data-icon="a"></div></a>
        <a href="#"><div class="ikon" data-icon="c"></div></a>
    </div>
</div>
``` 

.footer {
    margin: 0 auto;
    height: 150px;
    background: #302b35;
    z-index: -1;
}

.icons {
    color: #fff;
    font-size: 1.4em;
    text-align: center;

}

.icons a {
    color: #fff;
}

.ikon {
    display: inline-block;
    margin-top: 47px;
    padding: 20px;
}

Now I tried few things, but nothing worked so far, like:

.ikon:hover { background: #380606; }

or


.icons a:first-child:hover ~ .footer {
    background: #cc638b;
    transition: 0.5s;

But nothings works, obviously. I'd really appreciate some tips.

4 Answers

Jessica Barnett
Jessica Barnett
8,028 Points
Jessica Barnett
Jessica Barnett
8,028 Points

Is this what you're going for?

The :hover pseudo class can only affect elements that it can access with a combinator, and I don't think there is a combinator to select parent elements. So, the element you put :hover on has to be on the same level (a sibling), or lower (a child, or a child of a sibling.)

what I did was:

  1. move your < a > tags to the same level as your .footer div (which you're trying to access with :hover)
  2. use absolute positioning to individually move the < a > tags to about where they were
  3. put the .ikon class (and the :hover pseudo-element that's attached to it) on the < a > tag.

I hope that helps...?

Martin H
Martin H
986 Points
Martin H
Martin H
986 Points

Thanks Jessica, that is one solution that could work. Although when I do it your way, there is a strange problem with fonts (which I picked at fontatastic.me) and it gets really messed up.

Is there any other way to do this? I'm now also open to jquery, because I would like to maintain my css - your way creates so many problems for me to solve.

Jessica Barnett
Jessica Barnett
8,028 Points
Jessica Barnett
Jessica Barnett
8,028 Points

Hey, solving problems is part of the fun, no? : )

I'd look into jQuery if I were you. I tried to do it with vanilla javascript and it's... not working out so well. I'm still pretty new to Javascript, and figuring out how to access elements in the DOM is still such a pain for me. I've heard that JQuery makes that bit a lot easier...

I'm not really the best resource in that arena yet. But if I find a solution I'll definitely post it!

Jessica Barnett
Jessica Barnett
8,028 Points
Jessica Barnett
Jessica Barnett
8,028 Points

Wait, I think I got it!!! Try this one

I'm sure it's a lot more elegant with JQuery, but this is an option.
Thanks for posting this by the way! I've been having fun tweaking it.