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 Transitions and Transforms Getting Started with CSS Transitions Creating Your First Transition with transition-duration

gene c
gene c
13,630 Points
Posted by gene c
gene c
13,630 Points

What if i just want transition-duration to only work for :hover? not for :active?

I want a transition-duration when the mouse hovers over the button.

But I want the button to instantly change color when i click it.

How do I do that?

4 Answers

Steve Gallant
Steve Gallant
14,943 Points
Steve Gallant
Steve Gallant
14,943 Points

Hi Eugene, it looks like the answer to your question is covered in the MDN topic on Using CSS Transitions (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions). It would appear you list out all the transition properties to target in one line, then list the corresponding transition-durations in same consecutive order, in another line of the CSS file. hope it helps! Steve

Abdullahi Abdinasir Ali
Abdullahi Abdinasir Ali
9,520 Points
Abdullahi Abdinasir Ali
Abdullahi Abdinasir Ali
9,520 Points

U use the same just change hover to active 

.object:active{
Background: red;
}

U can use other styling am just giving example for easy understanding read more on this link https://developer.mozilla.org/en-US/docs/Web/CSS/:active I hope that helps. Let me know if u any other problem feel free. I will glad to answer any of quiz

Max Senden
Max Senden
23,177 Points
Max Senden
Max Senden
23,177 Points

Hi Eugene,

Giving the element a :active pseudo class is one part of the solution. The other part is removing the transition-duration. Doing so will make it change colour instantly when clicked.

To keep the colour change "active" after you clicked it is more difficult. It either involves javascript or some workaround by using certain html elements like <input> (which shouldn't be used for this stuff) and other psuedo classes.

Hope it helps, Max

gene c
gene c
13,630 Points
gene c
gene c
13,630 Points

is there a property that removes the transition-duration for active and not for hover?

Abdullahi Abdinasir Ali
Abdullahi Abdinasir Ali
9,520 Points
Abdullahi Abdinasir Ali
Abdullahi Abdinasir Ali
9,520 Points

You can do by give it property hover like this 

.object:hover{
color: purple;
}

I hope that helps

gene c
gene c
13,630 Points
gene c
gene c
13,630 Points

what about when it's being clicked? AKA the pseudo-class called ":active"