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 bobcat
bobcat
13,623 Points

Why do you add the transition properties to the button class instead of the button:hover pseudo-class?

Why do you add the transition properties to the button class instead of the button:hover pseudo-class?

I tried the challenge later in this module and added transition styles to the :hover class and it worked the same, so what is the advantage or disadvantage of doing it this way?

Thanks!

5 Answers

Andrei Duhanes
Andrei Duhanes
14,155 Points

Hi Patrick,

If you use button:hover you add a transition or effect to all of the buttons by default. If you use class - .button:hover you add a transition or effect only to the elements that have that class (that could be buttons it this case).

Patrik Horváth
Patrik Horváth
11,110 Points

this answere is same as my :)

Patrik Horváth
Patrik Horváth
11,110 Points
Patrik Horváth
Patrik Horváth
11,110 Points

can you describe more ? because this is same if i understend your question

Just for tags with class button

.button:hover

for all button tags 

button:hover
Andrei Duhanes
Andrei Duhanes
14,155 Points
Andrei Duhanes
Andrei Duhanes
14,155 Points

That surely means I copy pasted your answer...

Austin Whipple
Austin Whipple
29,847 Points
Austin Whipple
Austin Whipple
29,847 Points

Adding a transition to just the :hover pseudo class doesn't guarantee a proper in and out transition. For instance, if you wanted a button to fade between two colors on hover, adding to :hover will make sure it fades when you move the mouse over it, but if you add it to the button or .button it may not transition smoothly when you move your mouse off the button.

bobcat
bobcat
13,623 Points
bobcat
bobcat
13,623 Points

Thanks guys, that makes more sense now!