web-dev-qa-db-fra.com

Effet de fondu sur le survol de lien?

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

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

csshoverfadeeffect
129
Miles Henrichs

De nos jours, les gens n'utilisent que transitions CSS parce que c'est beaucoup plus facile que jouer avec JS , le support du navigateur est raisonnablement bon et c'est simplement esthétique, donc peu importe si ça ne marche pas. t fonctionne.

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 faire la transition de propriétés CSS spécifiques avec différentes temporisations et fonctions d’accélération 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émo ici

318
Marcel

Je sais que dans la question, vous indiquez que "je suppose que JavaScript est utilisé pour créer cet effet", mais vous pouvez également utiliser CSS. Un exemple est présenté 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!

Dans l'une des réponses, Marcel indique que vous pouvez "faire la transition de plusieurs propriétés CSS", vous pouvez également utiliser "tous" pour appliquer l'élément à tous vos styles: survolés, 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"!

8
Jake

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/

6
Niclas Sahlin

Essayez ceci dans votre css:

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