Buenas, tengo el siguiente código:
Código HTML:
<form>
<p>
<label>
<span style="background-color:white;">Normal: </span><input type="text"><br>
<span class="mensaje">
aaa<br>bbb<br>
</span>
</label>
</p>
<p>
...
</p>
...
Con los siguientes estilos:
Código:
label
{
cursor: pointer;
vertical-align: middle;
color: #777;
font-size: 14px;
font-variant: small-caps;
}
form p
{
margin-bottom: 10px;
background-color:gray;
border:2px solid cyan;
overflow:visible;
position:relative;
display:block;
}
form .mensaje
{
background-color:red;
display:block;
position:relative;
width: 100%;
}
form
{
box-sizing: border-box;
z-index:550;
width: 100%;
height: 100%;
padding: 70px 10% 20px 10%;
}
Con esos estilos tal cual están ahí se me muestra la imagen 1: el <p> se extiende para hacer huevo al <div> rojo. Esto es una de las cosa que quería.
El problema es que tengo otros formularios que tienen un tamaño fijo y que no puedo "estirar" para hacer hueco a este div, así que mi idea era que éste apareciese sólo al pasar el cursor, y lo hiciese sin ocupar más espacio, como en la imagen 3.
Eso no parecía muy difícil de hacer, tan sólo cambié el position:relative del .mensaje por un position:absolute. Ahora bien, sólo funciona si se aplica en el atributo style del elemento, si lo hago con el selector form .mensaje des de el head de la página no funciona, y se ve como en la imagen 2.
Espero que me hayan entendido y que alguien pueda ayudarme, muchas gracias!