web-dev-qa-db-fra.com

Couleur d'arrière-plan Hover Fade Effect CSS

Tout d'abord, je suis débutant. Je veux une instruction étape par étape.

Je veux ajouter un effet de survol en arrière-plan fluide à mes liens dans Wordpress

a {
  color:#000;}
a:hover {
  background-color: #d1d1d1; color:#fff;
}

Je veux que le survol des liens soit lent, plutôt qu'instantané. Ai-je besoin de JavaScript ou de jQuery? Si oui, dites-moi comment procéder.

31
anupal

Puisqu'il s'agit d'un effet cosmétique, il ne devrait pas être trop vital que cela se déclenche. Compte tenu de cela, vous voudrez peut-être regarder CSS 3 transformations .

a {
  color: #000;
  transition: background 0.5s linear;
}
a:hover {
  background-color: #d1d1d1;
  color: #fff;
}
<a href="http://example.com">Hover me</a>
84
Quentin

L'effet de transition CSS3 fonctionnerait pour ce que vous recherchez. Vous pouvez trouver plus d'informations sur la façon de l'utiliser ici: http://www.css3.info/preview/css3-transitions/

1
Blake Clerke