Mostrar u ocultar partes de la página web
Problema:
Como se puede mostrar y ocultar elementos de la página web a voluntad.
A veces queremos que una parte de la página pueda permanecer oculta a la vista del visitante, y que sólo se muestre bajo determinadas condiciones, algo así como ocurre con el atributo alt de las imágenes insertadas en las páginas web.
Por ejemplo: mostrar u ocultar un div con texto explicativo cuando el ratón pase por un enlace.
Solución
Directamente se puede aplicar un estilo al elemento mediante el atributo style.
Los elementos html poseen un atributo style que permite aplicarle un estilo CSS en linea, como visibility para ponerlo visible (visible) o invisible (hidden). Esta propiedad muestra u oculta, pero el espacio ocupado por el elemento permanece en la página.
Para cambiar de uno a tro estado basta con modificar el valor de esta propiedad en el atributo style. En este ejemplo se muestra u oculta un bloque div
Ejemplo
Como ejemplo para aclarar el uso de este mecanismo de ocultación usamos una página con un enlace tal que al pasar el ratón por encima muestre una etiqueta explicativa, que quedará oculta al retirar el ratón. La etiqueta está en un bloque div
Primero colocamos el bloque y el enlace en la página:
<div id="etiqueta" style="visibility: hidden"> Explicación aclaratoria del enlace</div>
<a href="example.com" onmouseover="visible()" onmouseout="oculto()"> Enlace muestra</>
Observa que el bloque lleva un atributo ID para identificarlo dentro de la página. La propiedad style.visibility está puesta en hidden.
Ahora colocamos el enlace al que se referirá el bloque anterior:
function visible(){
let div = document.getElementById("etiqueta");
div.style.visibility = 'visible'
}
function oculto(){
let dv = document.getElementById("etiqueta");
div.style.visibility = 'hidden';
}
En el ejemplo has ocultador el div con style, pero puedes ocultar con CSS: defines un estilo que además de visibillity defina otras propiedades para darle el formato que prefieras al bloque, sólo cambiará el código HTML de este elemento, los eventos permanecen igual. Solo que en lugar de cambiar style cambiaría un atributo class para alternar entre un class para visible y otro para invisible, por ejemplo.