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 Máire van Blerck
Máire van Blerck
11,475 Points

Can I select a sibling with a specific class on hover with CSS?

I was wondering. You can select a child with a specific class on hover. You can select a sibling with a certain condition. But can I also select a sibling on hover which has a specific class with CSS?

Or do I need to use javascript to solve the issue?

Christian Andersson
Christian Andersson
8,712 Points

Hey Máire, can you give us a more detailed explanation with perhaps a code example? It's a bit hard to follow what you want.

Máire van Blerck
Máire van Blerck
11,475 Points

Sure!

<div id="main">
    <div id="only_blue">
        <p> if you hover over this box the green boxes disappear</p>
    </div>
    <div id="only_green">
        <p> if you hover over this box the blue boxes disappear</p>
    </div>
    <div class="box green">
    </div>
    <div class="box green">
    </div>
    <div class="box blue">
    </div>
    <div class="box blue">
    </div>
    <div class="box green">
    </div>
</div>

#only_blue {
width:50%;
float:left;
background-color:black
color:blue;
}

#only_green {
width:50%;
float:right;
background-color:white;
color:green;
}

.box{
height:100px;
width:20%;
float:left;
}

.blue{
background-color:blue;
}
.green{
background-color:green;
}

#only_blue:hover  **selector which selects the boxes with the class green**{
display:none;
}

#only_green:hover  **selector which selects the boxes with the class blue**{
display:none;
}

6 Answers

Ruven Koviar
Ruven Koviar
3,917 Points

took me some while to find this answer...

#only_green {
width:50%;
float:right;
background-color:white;
color:green;
}

.box{
height:100px;
width:20%;
float:left;
}

.blue{
background-color:blue;
}
.green{
background-color:green;
}

#only_blue:hover ~ .green{
display:none;
}

#only_green:hover ~ .blue{
display:none;
}

as you can see i added "~" after "hover" which then applies the css rule only on the boxes

Christian Andersson
Christian Andersson
8,712 Points
Christian Andersson
Christian Andersson
8,712 Points

I don't think this is possible with plain CSS. You can do this however with some javascript or jQuery. Here is a quick example I did in jQuery:

http://jsfiddle.net/9xeyurL8/

Ernestas Sipavicius
Ernestas Sipavicius
6,327 Points
Ernestas Sipavicius
Ernestas Sipavicius
6,327 Points

You can hover and make it invisible if you don't move mouse somewhere else. Try this:

<html>
<head>

<style>
#only_blue {
width:50%;
float:left;
background-color:black
color:blue;
}

#only_green {
width:50%;
float:right;
background-color:white;
color:green;
}

.box1{
height:100px;
width:20%;
float:left;
}

.box2{
height:100px;
width:20%;
float:left;
}

.blue{
background-color:blue;
}
.green{
background-color:green;
}

#only_blue:hover ~ .box1 {
    display: none;
}

#only_green:hover ~ .box2 {
    display: none;
}
</style>

</head>
<body>
<div id="main">
    <div id="only_blue">
        <p> if you hover over this box the green boxes disappear</p>
    </div>
    <div id="only_green">
        <p> if you hover over this box the blue boxes disappear</p>
    </div>

    <div class="box1 green">
    </div>
    <div class="box1 green">
    </div>
    <div class="box2 blue">
    </div>
    <div class="box2 blue">
    </div>
    <div class="box1 green">
    </div>
</div>
</body>
</html>
Máire van Blerck
Máire van Blerck
11,475 Points
Máire van Blerck
Máire van Blerck
11,475 Points

Hi, Ruven and Ernestas.

Thanks for your time and effort :)

Have you tried your code? Because as far as I know ~ isn't the solution for this "problem".

You can in fact select the sibling div's with ~ and make them disappear, but not a div with a specific name and none of the other divs with the same parent.

I think I'm screwed and Christian is right. Which means that I have to learn javascript ;)

Máire van Blerck
Máire van Blerck
11,475 Points
Máire van Blerck
Máire van Blerck
11,475 Points

I've tried it, just to be sure. But it doesn't do the trick. :(

Hover only works when the div you hover over is the parent of the div you want to hide (or whatever you want to do with it), right?

Ruven Koviar
Ruven Koviar
3,917 Points

maybe i didnt get your problem, correct me if im wrong, i thought you wanted to hover the #only_blue div and all the green boxes will disapear and when you hover #only_green div all the blue boxes will disapear.

-maybe you wanted them to disapear forever(until you refresh the page) - then the solution is js/jq . -i saw that i your css you forgot to type ";" after background-color:black in your #only_blue which can send an error i think. -and in my answer i forgot to add the #only_blue rule in the css.

so i hope i got your problem right and maybe you just forgot to add the ";" or you copied my css and you didnt notice that i forgot to add the #only_blue rule

and if after all this im still didnt answer you plz write me what didnt i understand about you problem i realy want to help you out.

btw i have tried my code and it works for me

Máire van Blerck
Máire van Blerck
11,475 Points
Máire van Blerck
Máire van Blerck
11,475 Points

No, you got my question and the answer absolutely right! Sorry! I really thought that with hover you can't change the state of an element if that element isn't a child of the element you hover. But hover can also be used with siblings as your code proves.

I think that it doesn't work in mine, because another condition is affecting it. I came up with another solution for my website. However I think it's always good to know why something isn't working the way you expected. So thanks for the input guys!