it-swarm.com.de

Fade-Effekt beim Link-Hover?

auf vielen Websites, wie z. B. http://www.clearleft.com , werden Sie feststellen, dass die Links, wenn Sie den Mauszeiger darüber halten, in eine andere Farbe übergehen, anstatt sofort umzuschalten (Standardeinstellung) Aktion.

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

129
Miles Henrichs

Heutzutage verwenden die Leute nur CSS3-Übergänge , weil es viel einfacher ist als mit JS rumzumachen , die Browserunterstützung ist einigermaßen gut und es ist nur kosmetisch, es ist also egal, ob es nicht so ist. ' nicht funktionieren.

So etwas erledigt die Arbeit:

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 ändern, indem Sie die einzelnen Deklarationen durch Kommas 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

318
Marcel

Ich weiß, dass Sie in der Frage "Ich gehe davon aus, dass JavaScript verwendet wird, um diesen Effekt zu erzielen" angeben, aber auch CSS kann verwendet werden. Ein Beispiel finden Sie weiter 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 ändern" können. Sie können auch "all" verwenden, um das Element mit all Ihren: Hover-Stilen wie unten zu bearbeiten.

[~ # ~] 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 "all" Beispiel!

8
Jake

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/

6
Niclas Sahlin

Versuchen Sie dies in Ihrem CSS:

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