Effet de fondu sur le survol de lien?


134

sur de nombreux sites, tels que http://www.clearleft.com , vous remarquerez que lorsque les liens sont survolés, ils disparaissent dans une couleur différente au lieu de changer immédiatement, l'action par défaut.

Je suppose que JavaScript est utilisé pour créer cet effet, est-ce que quelqu'un sait comment?


1
Je vous remercie. Maintenant, je comprends comment créer des liens de survol, c'est juste que j'essaie de comprendre comment créer un effet plus lisse pour mes liens de survol.
Miles Henrichs

Réponses:


327

De nos jours, les gens n'utilisent que des transitions CSS3 parce que c'est beaucoup plus facile que de jouer avec JS , la prise en charge du navigateur est raisonnablement bonne et c'est simplement esthétique, donc peu importe si cela ne fonctionne pas.

Quelque chose comme ça fait le travail:

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

Vous pouvez également effectuer la transition de propriétés CSS spécifiques avec différents timings et fonctions d'accélération en séparant chaque déclaration par une virgule, comme ceci:

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

Démo ici


@AndreiCristof: Heureusement fonctionne dans IE10 ! Aucun préfixe de fournisseur requis non plus (ce qui est bizarre).
Marcel

J'ai testé les deux et j'espère que si j'ai trouvé la bonne raison pour laquelle la méthode CSS n'est pas fluide et fluide comme la manière jQuery. Corrigez-moi si j'ai tort, s'il-vous plait.
QMaster

Tu gères! Bien expliqué, m'a beaucoup aidé en le voyant.
plast1K

Mon test est avec une image, pas un lien.
Felipe

@FelipeMicaroniLalli est préférable de poster une question, je suppose, sonne définitivement comme un problème de syntaxe.
Marcel

9

Je sais que dans la question que vous dites "Je suppose que JavaScript est utilisé pour créer cet effet", mais CSS peut également être utilisé, un exemple est ci-dessous.

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>

Et voici un JSFIDDLE pour le code ci-dessus!


Marcel dans l'une des réponses indique que vous pouvez "transférer plusieurs propriétés CSS", vous pouvez également utiliser "tous" pour effectuer l'élément avec tous vos styles: hover comme ci-dessous.

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>

Et voici un JSFIDDLE pour l'exemple "tout"!


6

Vous pouvez le faire avec JQueryUI:

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

http://jsfiddle.net/dWCbk/


vous n'avez pas besoin de jqueryui pour cela, juste jquery
Juan

6
@Juan Non, jQuery ne peut animer que des "valeurs numériques uniques" dont les couleurs ne le sont pas (voir api.jquery.com/animate/#animation-properties ). Mais en fait, vous n'avez pas besoin de toute la bibliothèque jQueryUI, juste du plugin jQuery.Color, qui se trouve être intégré dans jQueryUI.
Niclas Sahlin

@Niclas Sahlin. J'ai trouvé votre violon à la recherche de transitions CSS. Votre transition JQuery-UI est tellement plus fluide, je suis sûr que les utilisateurs le remarqueront.
RubyRube

1
Il existe des solutions avec css, qui est beaucoup plus facile à mettre en œuvre
mhenkel

2

Essayez ceci dans votre css:

.a {
    transition: color 0.3s ease-in-out;
}
.a {
    color:turquoise;
}
.a:hover {
    color: #454545;
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.