Geek Answers Handbook

CSS transition does not work

Greetings to everyone that I'm trying to do now, when you bring the background, it turns purple, and the color of the text becomes white. (initially the background color is absent, and the text is black)

But it does not work!

What am I 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, when everyone says that I add it instead of a: hover ...

The initial state:

 text-color:black; background:none;

Induced state:

Smooth transition to:

  text-color:white; background:black;

I hope this helps everyone Thanks for your time!

+8
html css transition
source share
3 answers

Place them on a (rather than hover). And if you need multiple transitions, you must declare them together.

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

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

+6
source share

Do not set the transition to 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 actually changes in the :hover property. For example,

 a:hover{ color:green; }
+4
source share

You should try setting the transitions to a instead of a:hover .

More information about transitions can be found here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

+1
source share

More articles:


All Articles