SOS-FORUM

Derniers sujets

» Silence Inside Me - Ouverture
par Solitude 3/3/2018, 12:36

» ATLANTIC CITY - rpg city
par Solitude 15/3/2017, 10:41

» Bonne Année 2015
par Chantra Chantrapa 5/3/2017, 20:31

» Rio de Janeiro
par Solitude 14/9/2015, 15:34

» Bon Anniversaire Zeco
par Laurent 29/5/2015, 06:29


Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

Voir le sujet précédent Voir le sujet suivant Aller en bas  Message [Page 1 sur 1]

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
Ce tutoriel a été publié par ze_chaofan sur SOS-Forum.
Afin que les tutoriels de SOS-Forum restent en libre accès, ainsi que par respect du travail accompli, tout tutoriel copié ou s'en inspirant publié ailleurs qu'ici, devra en citer le ou les auteurs ainsi que la provenance via un lien vers ce sujet sur le SOS-Forum.

Hello...

Voici un petit tuto sympa pour faire ce genre d'effet :
Survolez moi !Et hop, me voilà apparu !

Intéressant, non ? Voici comment procéder :
Tout d'abord, collez ceci dans votre CSS :

Code:
/*Hoveractif-------------------------------------------------*/
.primero .secundo {visibilty: visible; display: inline;}
.primero:hover .secundo {visibilty: hidden; display: none;}
.primero .tercero {visibilty: hidden; display: none;}
.primero:hover .tercero {visibilty: visible; display: inline;}

Maintenant, voici le fonctionnement :
Tout d'abord, vous devrez tout mettre dans une balise de classe primero.
Dedans, vous y mettrez les balise que vous voulez, à savoir des balises de classe secundo et/ou primero.
Les texte dans la balise de classe secundo disparaîtront lors du survol.
Les texte dans la balise de classe tercero apparaîtront lors du survol.
Les texte dans la balise primo en dehors des autres resteront toujours visibles.


Voici un exemple pratique, avec des balises span :
Texte ne changeant pas Texte disparaissant Nouveau texte apparaissant
Code:
<span class="primero">Texte ne changeant pas <span class="secundo"> Texte disparaissant </span><span class="tercero"> Nouveau texte apparaissant </span></span>

Cependant, l'utilisation de span uniquement requiert que le texte apparaissant (ou tout autre contenu d'ailleurs) soit plus grand ou égal en taille à celui qui disparait, sous peine de souffrir occasionnellement d'un effet de clignotement.

Il est donc possible de passer par un div, il suffira alors de survoler la ligne.
Petit exemple (je colorie le div pour l'exemple) :

Texte ne changeant pas Texte disparaissant Nouveau texte apparaissant

Code:
<div class="primero">Texte ne changeant pas <span class="secundo"> Texte disparaissant </span><span class="tercero"> Nouveau texte apparaissant </span></div>

Voilà. Une fois le code mis dans votre CSS, il est possible de mettre le code HTML partout sur votre forum.

avatar
Invité
Invité
Ce peut être interressant, merci

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
Well done Ze !


Mais tu as oublié de mettre la joulie table bleue... confused

EDIT ZC: Arf ben oui, tu vois c'est tout moi ça... Merci.

avatar
nirupan
(Membre)
Voir le profil de l'utilisateur http://www.tamilfriends.forumpro.fr/
mm merci pour l'astuce très cher^^

avatar
demeter
(Membre)
Voir le profil de l'utilisateur http://altitudetropicale.forums-actifs.com/forum.htm
Merci Zeco, j'adopte cette astuce.


Contenu sponsorisé

Voir le sujet précédent Voir le sujet suivant Revenir en haut  Message [Page 1 sur 1]

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum

 
  •  

Créer un forum | © PunBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit