Bonjour,

Je cherche l'effet qui permet à un lien, au passage de la souris, " d'avancer ", comme par exemple, sur CSSActif, la colonne à droite où on peut cliquer sur Profil, Messagerie etc...

De préférence, un code CSS.
J'ai effectué quelques recherches sur Google, mais ne sachant pas vraiment comment s'appelle cet effet, je n'ai pas réussie à trouver ce que je cherchais...

Merci infiniment!

Bonjour.

Tu cherches à faire ce qu'on appelle une transition. Tu vas avoir deux états : l'état par défaut, où seront déclarées tes propriétés de base ainsi que les paramètres de la transition, et l'état au survol (:hover) où tu mettras les nouvelles propriétés à appliquer.

Dans ton cas, tu peux imaginer que l'état :hover possède une propriété padding-left qui ajoute un décalage à gauche (comme ici).

Ce tuto ainsi que celui-là te montrent des applications possibles.

Coucou,

Merci pour ton aide.
Alors, tout d'abord, la question qui me vient à l'esprit, est la suivante. J'ai créé une class en CSS, appelée templatetopic.
Une class basique, mais du coup, est-il possible d'insérer une autre class dedans tel que :hover ?

Bonsoir,

Ça s'écrit classe ^^ (oui, je le répèterai autant de fois qu'il le faudra)

Mais qu'est-ce que tu veux dire par "insérer une autre classe dedans" ? O_o D'autant que :hover est une pseudo-classe, qui permet de définir l'état d'un élément quand il est survolé.

Autant pour moi. ^^
Ben... Comment dire. Bon, je fais un essai, dis moi si ça serait ça:

Ma classe commence ainsi: .templatetopic {

Il faudrait donc que... .templatetopic:hover {

C'est ça?

C'est ça.

OK, donc si je ne m'abuse, ça doit donner quelques chose dans le genre, à deux trois trucs près :

Code:

.templatetopic:hover {
  padding-left: 20px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

Ah non !

Les paramètres de transition doivent être définis dans la définition de la classe .templatetopic. Cela permet de dire, pour cette classe là, que si jamais il y a un changement d'état, cela se fera avec une transition.

Ensuite, sachant par exemple que tu as un padding-left:0; dans la classe .templatetopic, il te faut juste définir un padding différent pour le sélecteur .templatetopic:hover. La transition de padding-left:0px; à padding-left:20px; se fera alors en fonction des paramètres que tu auras définis.

Ah! Donc si j'essaie de résumer :

Code:

.templatetopic {
  padding-left: 0px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

Code:

.templatetopic:hover {
  padding-left: 20px;
}

Oui c'est tout à fait sa

Annh la classe. *o* Ca marche super trop bien !
Et sinon, une dernière petite question qui est légèrement en rapport, puisqu'elle concerne ces liens animés : comment enlever le soulignement des liens au passage de la souris? Ils ne sont pas soulignés tant que la souris n'est pas dessus.

Merci infiniment pour votre aide en tout cas !

EDITE : Problème finalement réglé !

Ok pas de soucis

Hello,

Merci d'avoir prévenu, j'archive.

Bonne soirée !