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

cssselettore {
  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:

html<button>Show text</button>
<div class="text">text1</div>
<div>text2</div>
cssdiv{
  border: 1px solid black;
  width: 100px;
}
.text {
  visibility: hidden;
}
button:hover + .text {
  visibility: visible;
}

Результат:

Vedi anche

  • la proprietà opacity,
    che imposta la trasparenza di un elemento
  • l'attributo hidden,
    che nasconde l'elemento dalla pagina