Efekt zanikania po najechaniu na link?

134

W wielu witrynach, takich jak http://www.clearleft.com , zauważysz, że po najechaniu kursorem na linki zmienią kolor w przeciwieństwie do natychmiastowego przełączenia, co jest domyślną czynnością.

Zakładam, że do stworzenia tego efektu używany jest JavaScript, czy ktoś wie jak?

Miles Henrichs
źródło
1
Dziękuję Ci. Teraz rozumiem, jak tworzyć linki aktywujące, po prostu próbuję wymyślić, jak uzyskać płynniejszy efekt dla moich linków w dymku.
Miles Henrichs

Odpowiedzi:

327

W dzisiejszych czasach ludzie używają tylko przejść CSS3, ponieważ jest to o wiele łatwiejsze niż majstrowanie przy JS , obsługa przeglądarek jest dość dobra i jest tylko kosmetyczna, więc nie ma znaczenia, czy nie działa.

Coś takiego wykonuje swoją pracę:

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

Możesz również przenosić określone właściwości CSS z różnymi czasami i funkcjami ułatwiającymi, oddzielając każdą deklarację przecinkiem, na przykład:

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 tutaj

Marcel
źródło
@AndreiCristof: Na szczęście działa w IE10 ! Nie jest też wymagany prefiks sprzedawcy (co jest dziwne).
Marcel
Przetestowałem oba i mam nadzieję, że jeśli znalazłem właściwy powód, dla którego sposób CSS nie jest płynny i płynny, jak sposób jQuery. Proszę popraw mnie jeżeli się mylę.
QMaster
Rządzisz! Dobrze wyjaśnione, bardzo mi pomogło, widząc to.
plast1K
Mój test dotyczy obrazu, a nie linku.
Felipe
@FelipeMicaroniLalli najlepiej opublikować pytanie. Myślę, że zdecydowanie brzmi to jak problem ze składnią.
Marcel
9

Wiem, że w pytaniu piszesz: „Zakładam, że JavaScript jest używany do stworzenia tego efektu”, ale CSS może być również użyty, przykład jest poniżej.

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>

A oto JSFIDDLE dla powyższego kodu!


Marcel w jednej z odpowiedzi wskazuje, że możesz „przenosić wiele właściwości CSS”, możesz też użyć opcji „wszystkie”, aby nadać elementowi wszystkie style: hover, jak poniżej.

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>

A oto JSFIDDLE dla przykładu „wszystko”!

Jake
źródło
6

Możesz to zrobić za pomocą JQueryUI:

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

http://jsfiddle.net/dWCbk/

Niclas Sahlin
źródło
nie potrzebujesz do tego jqueryui, po prostu jquery
Juan
6
@Juan Nie, jQuery może animować tylko „pojedyncze wartości liczbowe”, które nie są kolorami (patrz api.jquery.com/animate/#animation-properties ). Ale tak naprawdę nie potrzebujesz całej biblioteki jQueryUI, tylko wtyczka jQuery.Color, która jest osadzona w jQueryUI.
Niclas Sahlin
@Niclas Sahlin. Znalazłem twoje skrzypce, szukając przejść CSS. Twoje przejście JQuery-UI jest o wiele płynniejsze, jestem pewien, że użytkownicy to zauważą.
RubyRube
1
Istnieją rozwiązania z css, które są o wiele łatwiejsze do wdrożenia
mhenkel
2

Spróbuj tego w swoim css:

.a {
    transition: color 0.3s ease-in-out;
}
.a {
    color:turquoise;
}
.a:hover {
    color: #454545;
}
Dylan
źródło