Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Luca Sorgiacomo
Luca Sorgiacomo
8,989 Points

Triggering 3d transition on parent when hover on child

Hi all, I've set up a 3d cube and I'm trying to have it move when I hover on one the three visible faces so that this gets moved (almost) in front. In other words I'm trying to trigger different transitions on a parent when hovering on each child.

Here is the pen. In this video and this one too Guil triggers a transition on an item when hovering on its parent, but I can't figure out a syntax to do the opposite...Is this possible at all with pure CSS or I'm bound to call on js?

2 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Hey Luca Sorgiacomo,

You can accomplish that using the Sass syntax in CodePen. With Sass you're able to target parent selectors.

Luca Sorgiacomo
Luca Sorgiacomo
8,989 Points

Thanks Guil. I've tried it here. What I've tried to do is to turn the .outer div blue only when I get inside the .inner but it doesn't appear to work...I just gave it a quick shot without reading the Sass specs in depth, so I might have done something wrong. Any suggestion?

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Oh, I see. It's OK to use a little jQuery to handle that. Take a look: http://codepen.io/Guilh/pen/lwiHB

Luca Sorgiacomo
Luca Sorgiacomo
8,989 Points

Ok, please bear with me. I've managed to deal with a 3d transform on the example you provided (http://cdpn.io/lIsHy), but on the original pen I can't get it to work...

Luca Sorgiacomo
Luca Sorgiacomo
8,989 Points

Never mind, I still had to add the jQuery Library. Thanks again!