1

En html, necesito hacer un div que muestre una linea de texto pero al sobrevolar con el ratón quiero que muestre otras líneas de texto en mi ejemplo las que estan en el div "mensaje" aunque tampoco se si esto se hace con div gracias anticipadas!

.linea{
   background-color: yellowgreen;
    width: 100%;
    color: #2c2b2b;
    text-align: center;
    font-size: 2.5em;
    padding: 1%;
}
<div class="linea">
    <p>linea 1</p>
</div>

<div class="mensaje">
    <p>linea 1</p>
    <p>linea 2</p>
    <p>linea 3</p>
    <p>linea 4</p>
    <p>linea 5</p>
</div>

2
  • 1
    ¿Puedes compartirnos lo que ya intentaste?
    – Moz
    Commented el 7 abr. 2018 a las 17:57
  • ya lo he puesto, gracias
    – Basicmix
    Commented el 7 abr. 2018 a las 18:06

2 respuestas 2

1

Para lograr esto puedes usar :hover en CSS la cual aplica un estilo cuando pasas el mouse sobre dicho elemento, para lograr lo que buscas, ocultamos todos los elementos con la clase oculta y usando el selector .mensaje:hover .oculta modificamos la vista de todos los elementos.

Te dejo un ejemplo:

.mensaje {
  background-color: yellowgreen;
  width: 100%;
  color: #2c2b2b;
  text-align: center;
  font-size: 2.5em;
  padding: 1%;
}

.oculta {
  display: none;
}

.mensaje:hover .oculta {
    display: block;
}
<div class="mensaje">
    <p>linea 1</p>
    <p class="oculta">linea 2</p>
    <p class="oculta">linea 3</p>
    <p class="oculta">linea 4</p>
    <p class="oculta">linea 5</p>
</div>

1
  • muchísimas gracias, funciona perfectamente!!!!
    – Basicmix
    Commented el 7 abr. 2018 a las 18:50
0

Para lograr que deseas tienes que usar :hover en .linea, pero para que se pueda mostrar el contenedor con la clase .mensaje este tiene que estar dentro del contenedor .linea.

Utiliza el siguiente código:

.linea{
  background-color: yellowgreen;
  width: 100%;
  color: #2c2b2b;
  text-align: center;
  font-size: 2.5em;
  padding: 1%;
}
.mensaje {
  display: none;
 }
 .linea:hover .mensaje {
  display: block;
}
<div class="linea">
  <p>linea 1</p>
  <div class="mensaje">
      <p>linea 2</p>
      <p>linea 3</p>
      <p>linea 4</p>
      <p>linea 5</p>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.