Propriedade visibility
A propriedade visibility define a invisibilidade
de um elemento. Ao mesmo tempo, todos os outros elementos
se comportarão como se o elemento não tivesse desaparecido.
Sintaxe
seletor {
visibility: visible ou hidden ou collapse;
}
Valores
| Valor | Descrição |
|---|---|
visible |
O elemento é visível. |
hidden |
O elemento torna-se invisível, como se fosse transparente, e continua a participar na formatação da página. |
collapse |
Se usar collapse para o conteúdo de células de tabelas,
elas desaparecem e a tabela é
reconstruída de novo.
Se este valor for aplicado não a linhas ou colunas de uma tabela, o resultado do seu uso será o mesmo que hidden.
|
Valor padrão: visible.
Exemplo
Vamos fazer com que o texto do primeiro parágrafo
seja inicialmente invisível, mas ao passar o cursor sobre o botão
'Show text' possamos lê-lo:
<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;
}
:
