En html, vamos a hacer un div que muestre una linea de texto, pero que al sobrevolar con el ratón muestre otras líneas de texto.
Supongamos que queremos mostrar un listado de enlaces, pero, que estén ocultos en un div.
Para lograr esto podemos usar la pseudo-clase :hover en CSS, la cual aplica un estilo cuando pasas el mouse sobre dicho elemento,
Se usa css, eso sin duda, pero dentro del HTML
Se usa la pseudo-clase :hover para hacer que ocurran cosas al pasar el ratón por encima de algún elemento
En el caso que el estilo de ese div se llame ".listado" el hover será ".listado:hover"
¿Cómo lograrlo?.
Tenemos que crear un div (que llamaremos listado) el cual va a contener nuestros enlaces.
Luego, tienes que usar :hover en la clase .listado,
Ocultamos todos los elementos con la clase oculta.
Para que se puedan mostrar los párrafos con la clase .oculta este tiene que estar dentro del contenedor .listado.
Con la clase oculta y usando los selectores .listado:hover y .oculta modificamos la vista de todos los elementos.
Lo anterior se resume en el siguiente código HTML:
Y, el CSS a emplear es el siguiente:
El resultado de nuestro ejemplo es el siguiente:
El procedimiento explicado, aplica perfectamente para cuando quieres abreviar espacio ocultando código,
