Effet de fondu sur le survol de lien?

sur de nombreux sites, tels que http://www.clearleft.com , vous remarquerez que lorsque les liens sont survolés, ils disparaissent dans une couleur différente au lieu de changer immédiatement, l'action par défaut.

Je suppose que JavaScript est utilisé pour créer cet effet, est-ce que quelqu'un sait comment?

De nos jours, les gens n'utilisent que des transitions CSS3 parce que c'est beaucoup plus facile que de jouer avec JS , la prise en charge du navigateur est raisonnablement bonne et c'est simplement esthétique, donc peu importe si cela ne fonctionne pas.

Quelque chose comme ça fait le travail:

a {
  color:blue;
  /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
}
a:hover { color:red; }

Vous pouvez également effectuer la transition de propriétés CSS spécifiques avec différents timings et fonctions d'accélération en séparant chaque déclaration par une virgule, comme ceci:

a {
  color:blue; background:white;
  -o-transition:color .2s ease-out, background 1s ease-in;
  -ms-transition:color .2s ease-out, background 1s ease-in;
  -moz-transition:color .2s ease-out, background 1s ease-in;
  -webkit-transition:color .2s ease-out, background 1s ease-in;
  /* ...and now override with proper CSS property */
  transition:color .2s ease-out, background 1s ease-in;
}
a:hover { color:red; background:yellow; }

Démo ici

Je sais que dans la question que vous dites "Je suppose que JavaScript est utilisé pour créer cet effet", mais CSS peut également être utilisé, un exemple est ci-dessous.

CSS

.fancy-link {
   color: #333333;
   text-decoration: none;
   transition: color 0.3s linear;
   -webkit-transition: color 0.3s linear;
   -moz-transition: color 0.3s linear;
}

.fancy-link:hover {
   color: #F44336;
}

HTML

<a class="fancy-link" href="#">My Link</a>

Et voici un JSFIDDLE pour le code ci-dessus!

Marcel dans l'une des réponses indique que vous pouvez "transférer plusieurs propriétés CSS", vous pouvez également utiliser "tous" pour effectuer l'élément avec tous vos styles: hover comme ci-dessous.

CSS

.fancy-link {
   color: #333333;
   text-decoration: none;
   transition: all 0.3s linear;
   -webkit-transition: all 0.3s linear;
   -moz-transition: all 0.3s linear;
}

.fancy-link:hover {
   color: #F44336;
   padding-left: 10px;
}

HTML

<a class="fancy-link" href="#">My Link</a>

Et voici un JSFIDDLE pour l'exemple "tout"!

Vous pouvez le faire avec JQueryUI:

$('a').mouseenter(function(){
  $(this).animate({
    color: '#ff0000'
  }, 1000);
}).mouseout(function(){
  $(this).animate({
    color: '#000000'
  }, 1000);
});

http://jsfiddle.net/dWCbk/

Essayez ceci dans votre css:

.a {
    transition: color 0.3s ease-in-out;
}
.a {
    color:turquoise;
}
.a:hover {
    color: #454545;
}