Effet de fondu au survol d'un lien ?

Question

Sur de nombreux sites, tels que http://www.clearleft.com Vous remarquerez que lorsque vous passez la souris sur les liens, ils changent de couleur au lieu de basculer immédiatement, ce qui est l'action par défaut.

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

Answer 1

De nos jours, les gens utilisent simplement Transitions CSS3 parce que c'est beaucoup plus facile que jouer avec les JS La prise en charge des navigateurs est raisonnablement bonne et l'aspect cosmétique n'a pas d'importance si le système ne fonctionne pas.

Quelque chose comme ça fait l'affaire :

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 faire passer des propriétés CSS spécifiques avec des temporisations et des fonctions d'assouplissement différentes en séparant chaque déclaration par une virgule, comme suit :

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émonstration ici

Answer 2

Je sais que dans la question vous dites "Je suppose que JavaScript est utilisé pour créer cet effet" mais CSS peut être utilisé aussi, 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 une des réponses, indique que vous pouvez "faire une transition entre plusieurs propriétés CSS". Vous pouvez également utiliser "all" pour affecter 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 du "tout" !

Answer 3

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/

Answer 4

Essayez ceci dans votre css :

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

Answer 5

Je le fais comme ça

a:hover {color:red}