Bağlantı Vurgulu üzerinde Solmaya Etkisi?

http://www.clearleft.com gibi birçok sitede, bağlantılar üzerine getirildiğinde, varsayılan işlemin hemen değiştirilmesinin aksine farklı bir renge dönüşeceklerini fark edeceksiniz.

JavaScript'in bu efekti oluşturmak için kullanıldığını varsayıyorum, kimse nasıl biliyor?

Günümüzde insanlar sadece CSS3 geçişlerini kullanıyor çünkü JS ile uğraşmaktan çok daha kolay , tarayıcı desteği oldukça iyi ve sadece kozmetik, bu yüzden işe yarayıp yaramadığı önemli değil.

Böyle bir şey işi yapar:

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

Ayrıca, her bildirimi bir virgülle ayırarak, farklı zamanlamalara ve hareket hızı işlevlerine sahip belirli CSS özelliklerini de değiştirebilirsiniz:

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

Burada demo

"JavaScript'in bu efekti oluşturmak için kullanıldığını varsayıyorum" dediğim soruyu biliyorum ama CSS de kullanılabilir, bir örnek aşağıdadır.

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>

Ve yukarıdaki kod için bir JSFIDDLE !

Cevaplardan birinde Marcel, "birden fazla CSS özelliğini geçiş" yapabileceğinizi belirtmek için öğeyi aşağıdaki gibi tüm hover stillerinizle etkilemek üzere "all" seçeneğini de kullanabilirsiniz.

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>

Ve işte bir JSFIDDLE "all" örneği için !

Bunu JQueryUI ile yapabilirsiniz:

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

http://jsfiddle.net/dWCbk/

Bunu css'nizde deneyin:

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