Proprietà visibility
La proprietà visibility imposta l'invisibilità
di un elemento. In questo caso, tutti gli altri elementi
si comporteranno come se l'elemento non fosse scomparso.
Sintassi
selettore {
visibility: visible o hidden o collapse;
}
Valori
| Valore | Descrizione |
|---|---|
visible |
L'elemento è visibile. |
hidden |
L'elemento diventa invisibile, come se fosse trasparente e continua a partecipare alla formattazione della pagina. |
collapse |
Se si usa collapse per il contenuto delle celle delle tabelle,
queste sembrano scomparire e la tabella
si ristruttura di nuovo.
Se questo valore viene applicato non alle righe o alle colonne di una tabella, il risultato del suo utilizzo sarà lo stesso di hidden.
|
Valore predefinito: visible.
Esempio
Facciamo in modo che il testo del primo paragrafo inizialmente
sia invisibile, ma quando si passa il mouse sul pulsante
'Show text' possiamo leggerlo:
<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;
}
:
