Effetto dissolvenza su Hover Link?

su molti siti, come ad esempio http://www.clearleft.com , noterai che quando i collegamenti vengono posizionati sopra, si dissolveranno in un colore diverso rispetto al passaggio immediato, l'azione predefinita.

Suppongo che JavaScript sia usato per creare questo effetto, qualcuno sa come?

Al giorno d'oggi le persone usano solo le transizioni CSS3 perché è molto più facile che scherzare con JS , il supporto del browser è ragionevolmente buono ed è semplicemente estetico, quindi non importa se non funziona.

Qualcosa del genere fa il lavoro:

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

Puoi anche trasferire specifiche proprietà CSS con differenti tempi e funzioni di allentamento separando ogni dichiarazione con una virgola, in questo modo:

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

Demo qui

So nella domanda che affermi "Suppongo che JavaScript sia usato per creare questo effetto" ma si può usare anche CSS, un esempio è sotto.

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>

Ed ecco un JSFIDDLE per il codice sopra!

Marcel in una delle risposte sottolinea che puoi "trasferire più proprietà CSS" e puoi anche usare "tutto" per effettuare l'effetto con tutti i tuoi stili: passa il mouse come di seguito.

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>

Ed ecco un JSFIDDLE per l'esempio "tutto"!

Puoi farlo con JQueryUI:

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

http://jsfiddle.net/dWCbk/

Prova questo nel tuo CSS:

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