Efek Fade pada Link Hover?

di banyak situs, seperti http://www.clearleft.com , Anda akan melihat bahwa ketika tautan melayang, mereka akan memudar menjadi warna yang berbeda sebagai lawan untuk segera beralih, tindakan default.

Saya menganggap JavaScript digunakan untuk membuat efek ini, apakah ada yang tahu caranya?

Saat ini orang hanya menggunakan transisi CSS3 karena jauh lebih mudah daripada mengacaukan JS , dukungan browser cukup baik dan itu hanya kosmetik sehingga tidak masalah jika tidak berfungsi.

Sesuatu seperti ini menyelesaikan pekerjaan:

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

Anda juga dapat mentransisikan properti CSS tertentu dengan berbagai timing dan fungsi pelonggaran dengan memisahkan setiap deklarasi dengan koma, seperti:

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 di sini

Saya tahu dalam pertanyaan Anda menyatakan "Saya berasumsi JavaScript digunakan untuk membuat efek ini" tetapi CSS juga dapat digunakan, contohnya adalah di bawah ini.

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>

Dan inilah JSFIDDLE untuk kode di atas!

Marcel dalam salah satu jawaban menunjukkan Anda dapat "transisi beberapa properti CSS" Anda juga dapat menggunakan "semua" untuk mempengaruhi elemen dengan semua Anda: gaya hover seperti di bawah ini.

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>

Dan di sini adalah JSFIDDLE untuk contoh "semua"!

Anda dapat melakukan ini dengan JQueryUI:

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

http://jsfiddle.net/dWCbk/

Coba ini di css Anda:

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