Rappel du premier message :
Bonjour ^^ Grâce à un petit bidouillage, et à la finition de notre codeur préféré Taktiik, je peux vous dévoiler cette astuce ^^ qui donnera:
Ici l'exemple
Si vous ne l'avez pas encore compris, il s'agit du titre de forum ( ou catégorie ) qui glisse quand la souris passe dessus.
Donc déjà, ce qu'il faut savoir, c'est que c'est le «:hover » qui va permettre cette astuce, accompagné d'une modification du .forumlink. On commence par prendre la partie
On y ajoute les propriétés suivantes:
Maintenant, on passe au a.forumlink:hover, à rajouter dans la feuille CSS.
Bonjour ^^ Grâce à un petit bidouillage, et à la finition de notre codeur préféré Taktiik, je peux vous dévoiler cette astuce ^^ qui donnera:
Ici l'exemple
Si vous ne l'avez pas encore compris, il s'agit du titre de forum ( ou catégorie ) qui glisse quand la souris passe dessus.
Donc déjà, ce qu'il faut savoir, c'est que c'est le «:hover » qui va permettre cette astuce, accompagné d'une modification du .forumlink. On commence par prendre la partie
- Code:
.forumlink
{
Vos personnalisations
}
On y ajoute les propriétés suivantes:
- Code:
display: block;
color: red; /* Couleur de départ */
text-align: left;
transition: all 1s; /* Durée de la transition, mettez les mêmes valeurs partout, ça sera plus facile */
-moz-transition: all 1s;
-webkit-transition: all 1s;
Maintenant, on passe au a.forumlink:hover, à rajouter dans la feuille CSS.
- Code:
a.forumlink:hover
{
color: green; /* Couleur d'arrivée */
margin-left: 15px; /* Décalement ( nombre de px à décaler pour l'arrivée)*/
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
}
Vos commentaires et remerciements sont toujours bienvenus ^^
Si vous avez des problèmes avec ce LS, venez poster ici.
Dernière édition par Winst le Mer 25 Avr 2012 - 19:44, édité 3 fois
![[CSS] Hover (défilement bref) sur les noms catégories et forums - Page 17 JGBUOP6](https://i.imgur.com/jGBUOP6.png)
![[CSS] Hover (défilement bref) sur les noms catégories et forums - Page 17 Crea_v15](https://i.servimg.com/u/f55/17/92/33/72/crea_v15.jpg)
