Fade-Effekt auf Link Hover?

Auf vielen Websites, z. B. http://www.clearleft.com , werden Sie feststellen, dass die Links beim Bewegen des Mauszeigers in eine andere Farbe übergehen, anstatt sofort zu wechseln. Dies ist die Standardaktion.

Ich gehe davon aus, dass JavaScript verwendet wird, um diesen Effekt zu erzeugen. Weiß jemand wie?

Heutzutage verwenden die Leute nur noch CSS3-Übergänge, weil es viel einfacher ist als mit JS zu spielen , die Browserunterstützung einigermaßen gut ist und nur kosmetisch, so dass es keine Rolle spielt, ob es nicht funktioniert.

So etwas erledigt den Job:

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

Sie können auch bestimmte CSS-Eigenschaften mit unterschiedlichen Timings und Beschleunigungsfunktionen übergehen, indem Sie jede Deklaration wie folgt durch ein Komma trennen:

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 hier

Ich weiß in der Frage, die Sie stellen "Ich gehe davon aus, dass JavaScript verwendet wird, um diesen Effekt zu erzeugen", aber CSS kann auch verwendet werden, ein Beispiel ist unten.

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>

Und hier ist ein JSFIDDLE für den obigen Code!

Marcel weist in einer der Antworten darauf hin, dass Sie "mehrere CSS-Eigenschaften übergehen" können. Sie können auch "alle" verwenden, um das Element mit all Ihren: Hover-Stilen wie unten zu beeinflussen.

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>

Und hier ist ein JSFIDDLE für das Beispiel "all"!

Sie können dies mit JQueryUI tun:

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

http://jsfiddle.net/dWCbk/

Versuchen Sie dies in Ihrem CSS:

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