Mostrar u ocultar elementos

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 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, como visibility para ponerlo visible (visible) o invisible (hidden). Esta propiedad muestra u oculta, pero el espacio ocupado por el elmento permanece en la página.

Para cambiar de uno a tro estado basta con modificar el valor de esta propiedad.

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.
Primero colocamos el bloque div 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 lugar de style puedes usar un estilo CSS para, además de mostrarlo, darle el formato que prefieras al bloque DIV, sólo cambiará el código HTML de este elemento, los eventos permanecen igual.

 

scripts