Propiedad visibility
La propiedad visibility establece la invisibilidad
de un elemento. Al mismo tiempo, todos los demás elementos
se comportarán como si el elemento no hubiera desaparecido
a ninguna parte.
Sintaxis
selector {
visibility: visible o hidden o collapse;
}
Valores
| Valor | Descripción |
|---|---|
visible |
El elemento es visible. |
hidden |
El elemento se vuelve invisible, como si fuera transparente, y al mismo tiempo continúa participando en el formateo de la página. |
collapse |
Si se usa collapse para el contenido de las celdas de las tablas,
estas parecen desaparecer y la tabla
se reestructura de nuevo.
Si este valor se aplica no a las filas o columnas de una tabla, el resultado de su uso será el mismo que hidden.
|
Valor por defecto: visible.
Ejemplo
Hagamos que el texto del primer párrafo inicialmente
sea invisible, pero al pasar el cursor sobre el botón
'Show text' podamos leerlo:
<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;
}
:
