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!

Solution 1

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/

Solution 2

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;
}

Solution 3

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

Comments

[user2766367]

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]

Why would you recommend that?

[user2766367]

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

[Albzi]

@user2766367 You would have something like this: a:hover{background:purple;color:white;}