Fade-Effekt auf Link Hover?

134

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?

Miles Henrichs
quelle
1
Danke dir. Jetzt verstehe ich, wie man Hover-Links erstellt. Ich versuche nur herauszufinden, wie ich einen sanfteren Effekt für meine Hover-Links erzielen kann.
Miles Henrichs

Antworten:

327

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

Marcel
quelle
@AndreiCristof: Funktioniert aber zum Glück in IE10 ! Es ist auch kein Herstellerpräfix erforderlich (was seltsam ist).
Marcel
Ich habe beide getestet und hoffe, dass ich den richtigen Grund dafür gefunden habe, dass der CSS-Weg nicht reibungslos und fließend ist wie der jQuery-Weg. Bitte korrigieren Sie mich, wenn ich falsch liege.
QMaster
Du rockst! Gut erklärt, hat mir sehr geholfen, indem ich es gesehen habe.
plast1K
Mein Test ist mit einem Bild, nicht mit einem Link.
Felipe
@FelipeMicaroniLalli am besten eine Frage zu posten, denke ich, klingt definitiv wie ein Syntaxproblem.
Marcel
9

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"!

Jake
quelle
6

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/

Niclas Sahlin
quelle
Sie brauchen kein JQuerui dafür, nur JQuery
Juan
6
@Juan Nein, jQuery kann nur "einzelne numerische Werte" animieren, die keine Farben sind (siehe api.jquery.com/animate/#animation-properties ). Sie benötigen jedoch nicht die gesamte jQueryUI-Bibliothek, sondern nur das jQuery.Color-Plugin, das zufällig in jQueryUI eingebettet ist.
Niclas Sahlin
@Niclas Sahlin. Ich habe Ihre Geige auf der Suche nach CSS-Übergängen gefunden. Ihr JQuery-UI-Übergang ist so viel reibungsloser, dass die Benutzer ihn sicher bemerken werden.
RubyRube
1
Es gibt Lösungen mit CSS, die viel einfacher zu implementieren sind
Mhenkel
2

Versuchen Sie dies in Ihrem CSS:

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