1
CSS/HTML : Système d'apparition/disparition au survol le 9/1/2010, 15:11
| 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.
