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 CSS Layout Techniques Flexbox Layout Animating Flexbox

Richard Walton
Richard Walton
10,861 Points
Posted by Richard Walton
Richard Walton
10,861 Points

Transitions not applied to their perceived appropriate selectors?

When we apply flex-grow to the hover:not pseudo class that commands the links (except the logo) to transition to expand to 2, why do we attach its timing ( .5s) to a different class selector (the one above it) main-nav li ? I tried putting it where it seems to make more sense with the hover:not pseudo class, and it works except that when you move away from hover it bounces back instead of a smooth transition back? Why?

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points

Please try different browsers if this issue occurs. Might be browser incompatibility.

3 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Richard,

In general, you do not want to apply transition property values to an elements hover state unless you're specifically going for that type of effect where the transition only goes one way.

The reason it doesn't work when applied to the hover state is because that transition duration value only exists when you're hovering over the element. As soon as you hover off the element the transition duration is no longer applied and you go back to the default value of 0s which gives you an instant change back.

When you apply the transition to the resting state then those values will exist in both the resting and hover states allowing for the transition to happen both ways.

Let me know if you need further clarification.

Richard Walton
Richard Walton
10,861 Points
Richard Walton
Richard Walton
10,861 Points

Thanks Jason, That makes sense mostly. I am thinking of it as main-nav li hover:not(.main-logo) is only pointing in the direction of main-nav li. The transition/duration or how long that state lasts needs to be anchored to the the resting state: like controlling a kite with a string, someone (resting state) must be holding it to it make behave?

If I can't wrap my head around the WHY something works, it makes it hard to sleep, thanks!

Aaron Coursolle
Aaron Coursolle
18,014 Points
Aaron Coursolle
Aaron Coursolle
18,014 Points

I was wondering how to make things more smoother myself, and found this link:

https://css-tricks.com/different-transitions-for-hover-on-hover-off/

Make sure to get the source code of the "view demo" because the code in the write-up is not complete.

In the case of sliding transitions, I think you would have to specify a slide in the opposite direction, and set a transition time. Not sure if it needs to be set to overflow: hidden again.

Richard Walton
Richard Walton
10,861 Points
Richard Walton
Richard Walton
10,861 Points

Thanks Aaron 4 months seems like a long time ago! Even though things work, sometimes I get caught up little things that bug me, I moved on though , but I will check out your link! Thanks again!