CODEWITHSUNDEEP
javascripthtmlcsswordpressfade
Saskia Chaotique
Saskia Chaotique

Reputation: 11

Fade link hover not working

I used the following to create a fade link hover:

 a:link {color:#333333; text-decoration: none;
-o-transition:.5s; 
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
 transition:.5s;} 
a:visited {color:#FF0033; text-decoration: none;}
a:hover {color:#000000; text-decoration: none;}
a:active {color:#FF0033; text-decoration: none;}
a:focus {outline-style: none;}

I use Wordpress and my website has different colors for the different links (e.g. menu in color A, category links in color B, titles in color C, etc.)

For some weird reason, the fade hover is working perfectly fine for the category links (e.g. "Conciertos" in the grey box) but is not functioning correctly for the rest of the links. It does some kind of slow hover. Please check flamencosrosas.com to see what I mean. Can anyone help, please?

Many thanks!

Upvotes: 0

Views: 64

Answers (1)

Oceanity
Oceanity

Reputation: 194

You should specify what is being transitioned, so:

 a {color:#FF0033; text-decoration: none;
-o-transition: color .5s; 
-ms-transition: color .5s;
-moz-transition: color .5s;
-webkit-transition: color .5s;
 transition: color s;} 
a:visited {color:#FF0033; }
a:hover {color:#000000; }
a:active {color:#FF0033; }
a:focus {outline-style: none;}

Fiddle here, I have made the transitions 1s so they are more noticeable.

Also, did you mean for the links to be #333333 by default? the transition between #333333 and #000000 is so slight you might just not notice the transition happening.

Upvotes: 1

Related Questions