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 Animating SVG with CSS Transitions and Transforms Rotating and Scaling SVG

Posted by Eddy Lee
Eddy Lee
5,885 Points

I may have missed this, but why does the code have to read "heart:hover heart-icon"? Why can't it be "heart-icon:hover"?

I may have missed this, but why does the code have to read?:

heart:hover heart-icon { .... }

Why can it not be?:

heart-icon:hover { ...}

2 Answers

Nigar Sadiqli
Nigar Sadiqli
10,281 Points
Nigar Sadiqli
Nigar Sadiqli
10,281 Points

With .heart-icon:hover { ...} hover will be applied only when you hover over the heart icon, it won't be applied if you hover over the background of the icon(pink circle around the heart icon).

But with .heart:hover heart-icon { .... } it means that even when you hover over the background of the heart icon(pink cirle) the hover effect will apply as well

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Eddy,

If you use .heart-icon:hover then you have to be over the heart itself to get the transition. Hovering over things that are moving is problematic because if the element moves away from the pointer then it won't be in the hover state anymore. Then it starts to transition back and you end up getting this jumping back and forth type movement.

I recommend you try it out with each of the icons to see.

Guil wanted to be able to hover over the outer circle to get the inner icons to transition. Generally it's preferable to have the hover area be some outer containing element that isn't moving so that you don't have that bouncing back and forth transition problem.

Jason Brown
Jason Brown
9,626 Points
Jason Brown
Jason Brown
9,626 Points

I'm kind of wondering the same thing with the hammer example. I get the same results as Guil when I do this:

''' .hammer:hover .hammer-icon { transform: rotate(45deg); transform: .3s ease-out; } '''

instead of this:

''' .hammer:hover .hammer-icon { transform: rotate(45deg); }

.hammer-icon { transform: .3s ease-out; } ''' When my curser barely enters the circle the hammer moves as it should with my version of the code. Just curious ...

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Jason,

I'm not sure if that's how it is in your code or you made a mistake typing it out here but the 2nd declaration should be transition: transform .3s ease-out;

With your css, you should be seeing a difference. When your mouse enters the circle, you should see the hammer rotate 45 over .3s as it should. But when your mouse leaves the circle you should see the hammer instantly snap back to the original position.

The transition doesn't go both ways because you're only applying the transition on .hammer-icon when you're hovering on .hammer

By applying the transition to .hammer-icon only then it exists at all times regardless of whether you're hovering over .hammer or not.