Diferentes resultados al aplicar estilos en atributo style o en el head

[danihxh]

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!

[kseso?]

Con la expresión "pasar el cursor" se refiere a hacer :hover sobre el elemento? Sí?
Refiriendome sólo a css*, los pseudoelementos y pseudoclases no son accesibles desde la etiqueta del propio elemento en el body. Sólo a traves de las reglas incluidas en el head con "style" u hoja enlazada.

*incluido html5 que permite colocar estilos en el body, pero tambien con <style></style>

[danihxh]

Sí, me refería a :hover, pero no es es el problema. Todavía no he añadido el :hover en los estilos porque primero quise comprobar que todos los divs se posicionaban correctamente, pero la sorpresa vino al pasar los estilos del atributo style a las etiquetas <style></style> y ver que no se mostraba igual :(