CSS- Transition not working

Question

Hello everyone I'm currently trying to do a transition when you hover the background turns purple and the text-color turns white.(originally there's no background color and the text-color is black...)

But it ain't working!

What is it that Im doing wrong!?

a:hover { color: white; -webkit-transition: color 1000ms linear; -moz-transition: color 1000ms linear; -o-transition: color 1000ms linear; -ms-transition: color 1000ms linear; transition: color 1000ms linear; background-color: purple; -webkit-transition: background-color 1000ms linear; -moz-transition: background-color 1000ms linear; -o-transition: background-color 1000ms linear; -ms-transition: background-color 1000ms linear; transition: background-color 1000ms linear; }

So///EDIT as everyone keeps telling me to add it on a instead of a:hover...

Initial state:

text-color:black; background:none;

Hovered state:

Smooth Transition to:

 text-color:white; background:black;

I hope this helps everyone out Thanks for your time!

It appears to be working here. jsfiddle.net/4zhnP ... did you want something like this? jsfiddle.net/pySY4 — Josh Crozier
– Josh Crozier, Commented Oct 14, 2013 at 16:01
It would be easier if you included some html. You might need to do something like .header > .navlinks > li > a:hover — Albzi
– Albzi, Commented Oct 14, 2013 at 16:02

Moob · Accepted Answer · 2013-10-14 16:39:04Z

8

Put them on the a (not the hover) AND if you want multiple transitions you have to declare them together.

-webkit-transition: color 1000ms linear, background-color 1000ms linear;

http://jsfiddle.net/4zhnP/1/

answered Oct 14, 2013 at 16:39

Moob

16.5k1 gold badge40 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2766367 Over a year ago

Thank you, your description and your solution provided clear,concise information on why and how to do it. :D

Dan Johnson · Accepted Answer · 2013-10-14 16:03:12Z

Don't set the transition on the :hover property.

a { color: white; -webkit-transition: color 1000ms linear; -moz-transition: color 1000ms linear; -o-transition: color 1000ms linear; -ms-transition: color 1000ms linear; transition: color 1000ms linear; background-color: purple; -webkit-transition: background-color 1000ms linear; -moz-transition: background-color 1000ms linear; -o-transition: background-color 1000ms linear; -ms-transition: background-color 1000ms linear; transition: background-color 1000ms linear; }

Then set what is actually changing on the :hover property. For example,

a:hover{ color:green; }

Ok, so If I wanted initially the text-color to be black, and no background and once you hover the transition begins to background color purple and text-color white how would be?
@user2766367 You would have something like this: a:hover{background:purple;color:white;}

vanev_ · Accepted Answer · 2013-10-14 16:03:27Z

You should try to set the transitions on the a, instead of the a:hover.

You can find more information on transitions here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Collectives™ on Stack Overflow

CSS- Transition not working

3 Answers 3

1 Comment

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Related