[CSS] Hover (défilement bref) sur les noms catégories et forums

Vorn

Age : 27Messages : 2342

Lun 26 Mar 2012 - 18:40

Rappel du premier message :

#phpBB2

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;
}


Voilà voilà :) Merci à Taktiik pour l'aide aussi ^^

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

Masterweb80

Age : 35Messages : 129

Mer 15 Jan 2014 - 21:13

Au faite l'explication n'ai pas au top , je mais les codes ou exactement .?

smoukii

Age : 31Messages : 25

Ven 17 Jan 2014 - 8:54

Très ludique... °3° *s'est amusé à passer la souris dessus des tonnes de fois* Je prend ♥ Merci ♥

Mimisu

Age : 28Messages : 9

Sam 18 Jan 2014 - 7:39

thx

Keylha

Age : 23Messages : 82

Dim 19 Jan 2014 - 2:40

Merci ! :3

senda95

Age : 31Messages : 35

Jeu 23 Jan 2014 - 2:57

merci !

Shany

Age : 39Messages : 59

Jeu 23 Jan 2014 - 23:43

Merci

Misaho Kiha

Age : 33Messages : 55

Ven 24 Jan 2014 - 2:45

Merci

Hana Evali

Age : 33Messages : 195

Dim 26 Jan 2014 - 20:49

l'astuce que je cherchais ! merci !

Yukiji

Age : 23Messages : 115

Lun 27 Jan 2014 - 0:26

Merci!

Darkeye

Age : 24Messages : 56

Lun 3 Fév 2014 - 22:19

Ooooh **
J'adore =)

Alys19

Age : 33Messages : 59

Dim 9 Fév 2014 - 18:34

Merciii!!!

Inamio

Age : 31Messages : 252

Lun 10 Fév 2014 - 17:47

C'est une bonne idée
merci du partage

RozenBreizh

Age : 32Messages : 1411

Mar 11 Fév 2014 - 12:30

Merci pour le tuto/astuce bien efficace :)

Foudry

Age : 23Messages : 31

Mar 11 Fév 2014 - 20:23

Moi je trouve tout ça génial ! Merci beaucoup

Vorn

Age : 27Messages : 2342

Mar 11 Fév 2014 - 21:21

De rien ! Content que cela vous aides ^^

Nal Souclade

Age : 25Messages : 167

Mer 12 Fév 2014 - 20:27

Wayou ! Super ! Merci !

♦ Mari-Jane

Age : 31Messages : 39

Jeu 13 Fév 2014 - 11:27

Merci

Lillau

Age : 23Messages : 10

Ven 14 Fév 2014 - 10:30

Je voudrais voir ! Merci pour le partage

Sakura-chan

Age : 26Messages : 180

Mar 25 Fév 2014 - 2:44

Merci ! ^^

jotherrien13

Age : 31Messages : 34

Mer 26 Fév 2014 - 19:24

Merci

Aelita

Age : 31Messages : 278

Jeu 27 Fév 2014 - 15:05

Merci

W' Wakune

Age : 25Messages : 11

Sam 1 Mar 2014 - 16:11

Thanks you :3

Moony

Age : 24Messages : 14

Dim 2 Mar 2014 - 19:46

Merci beaucoup :)

Hayate747

Age : 34Messages : 196

Dim 2 Mar 2014 - 22:01

Merci !

Invité

Lun 3 Mar 2014 - 8:07

merci =)

Contenu sponsorisé