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

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

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,141 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

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

Steve Gallant
Steve Gallant
14,918 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

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

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