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

CSS

Posted by Ivan Tomicic
Ivan Tomicic
3,873 Points

Background changing on hover

Hello, I have small problem, can you tell me why is this not working if I tell css to change .wrapper on .first:hover and works if I tell css to change .second on .first:hover?

.first { position: fixed; bottom: 0px; left: 0px; width: 200px; height: 200px; color: #FFF; background-color: red; }

.first:hover ~ .second { /* If I set .wrapper instead of .second it won't work? */ background-color: orange; }

.wrapper { background-color: #aaa; transition: background 0.5s ease-in-out; }

.second { width: 200px; height: 200px; color: #FFF; background-color: blue; transition: background 0.5s ease-in-out; }

4 Answers

Markus Ylisiurunen
Markus Ylisiurunen
15,034 Points
Markus Ylisiurunen
Markus Ylisiurunen
15,034 Points

Hi!

Okay so your problem is that you can't select parent element element in css. You cant select .wrapper if you have already selected .first or .second.

So let me explain. ~ combinator means that it will select any following sibling of specific element, For example div ~ p would select every following paragraph if it's sibling of div.

<div>
  <p>Some text</p>      /* This wouldn't be selected */
  <div>Content</div>
  <p>Some text</p>      /* This would be selected */
  <p>Some text</p>      /* This would be selected */
</div>

I redesigned your code and now it should work.

Here is the link for my version: JSFiddle

Ivan Tomicic
Ivan Tomicic
3,873 Points

Thank you so much, that was very clear! Thanks

Markus Ylisiurunen
Markus Ylisiurunen
15,034 Points
Markus Ylisiurunen
Markus Ylisiurunen
15,034 Points

Hi Ivan! Can you send your html code too?

And can you also describe your specific problem a little more and more precise. It's pretty hard to understand what is the problem and what you want to do.

And a little tip to add code to your post: Check "Markdown Cheatsheet" under the answer text box. It will make it more readable.

Ivan Tomicic
Ivan Tomicic
3,873 Points
Ivan Tomicic
Ivan Tomicic
3,873 Points

Sorry, here is code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>

    <section class="wrapper">
        <div class="first"></div>
        <div class="second"></div>
   </section>

    </body>
</html>


.first {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 200px;
    height: 200px;
    color: #FFF;
    background-color: red;
}

.first:hover ~ .second { /* If I set .wrapper instead of .second it won't work? */
    background-color: orange;
}

.wrapper {
    background-color: #aaa;
    transition: background 0.5s ease-in-out;
}

.second {
    width: 200px;
    height: 200px;
    color: #FFF;
    background-color: blue;
    transition: background 0.5s ease-in-out;
}

So what I actually want to create is something like this where this white background (section) would get different background image when each of those articles are hovered?

Andrew Mosley
Andrew Mosley
12,328 Points
Andrew Mosley
Andrew Mosley
12,328 Points

You want something like this for your code:

.image1:hover { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Just have one of those for each image you need to have, specifying the correct url to the image in the background property. In my example i have a class called .image1, etc. but you can use whatever you like of course.

Markus Ylisiurunen
Markus Ylisiurunen
15,034 Points
Markus Ylisiurunen
Markus Ylisiurunen
15,034 Points

I believe he doesn't want to change only the background of the hovered image but the background of the whole page.

Ivan Tomicic
Ivan Tomicic
3,873 Points

That's right! Sorry if I wasn't clear enough Andrew :(