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 Alexander Doona
Alexander Doona
2,935 Points

CSS Transitions problem

Hello all

I am having difficulty implementing a simple CSS transition into my site. The first transition works fine, but only when i try to implement the transition on class2 via class1:hover, it doesn't work. I have tested it across several browsers, made sure to include vendor prefixes where necessary, and tried many different properties but I cannot figure out what I'm doing wrong with what should be a fairly simple bit of code? Can anyone shed some light?

Thanks,

.class1:hover{
background-color:yellow;
transition:background-color 1s linear 0s;
}

.class1:hover .class2{
background-color:yellow;
transition:background-color 1s linear 0s;
}
James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Post the relevant HTML as well

Alexander Doona
Alexander Doona
2,935 Points

Here is the HTML, the rest of the CSS is simply height, width and margins. There is nothing else to affect these two div's.

<div class="class1">
</div>

<div class="class2">
</div>

2 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points 
.class1:hover .class2

This says find class2 as a descendant of class1. However in the HTML you posted it's a sibling so you need to use the general sibling selector it's combinator is ~

.class1:hover ~ .class2

working demo: http://codepen.io/jamesbarnett/pen/oFGwb/?editors=110

Alexander Doona
Alexander Doona
2,935 Points

Ah I had no idea.This is solved about 1 million issues for me. Thanks James!

Alexander Doona
Alexander Doona
2,935 Points
Alexander Doona
Alexander Doona
2,935 Points

Nope, both independent divs. I have even made a new sandbox html and css sheets just to test it in the most basic setting with no potential interfering elements and still nothing. The text editor I am using is notepad++ and I am completely stumped.