Propriété visibility
La propriété visibility définit l'invisibilité
d'un élément. Dans ce cas, tous les autres éléments
se comporteront comme si l'élément n'avait
disparu nulle part.
Syntaxe
sélecteur {
visibility: visible ou hidden ou collapse;
}
Valeurs
| Valeur | Description |
|---|---|
visible |
L'élément est visible. |
hidden |
L'élément devient invisible, comme s'il était transparent et continue de participer à la mise en forme de la page. |
collapse |
Si vous utilisez collapse pour le contenu des cellules des tableaux,
elles semblent disparaître et le tableau
se reconfigure.
Si cette valeur est appliquée à d'autres éléments que les lignes ou les colonnes d'un tableau, le résultat de son utilisation sera le même que hidden.
|
Valeur par défaut : visible.
Exemple
Faisons en sorte que le texte du premier paragraphe soit initialement
invisible, mais lorsque le curseur survole le bouton
'Show text' nous puissions le lire :
<button>Show text</button>
<div class="text">text1</div>
<div>text2</div>
div{
border: 1px solid black;
width: 100px;
}
.text {
visibility: hidden;
}
button:hover + .text {
visibility: visible;
}
:
