-
Cómo hacer un cuadro de texto mouseover pop-out en HTML
-
La adición de Cascading Style Sheets (CSS) para HTML trajo un control sin precedentes sobre la apariencia de los elementos visibles de una página Web. El "vuelo estacionario" pseudo-clase se aplica a un elemento cuando el cursor del ratón del usuario está sobre ella. Utilice la opción "flotar" pseudo-clase para crear menús desplegables y otros elementos que cambian dinámicamente. Utilizarlo con un elemento de "área de texto" para crear un pequeño cuadro de texto que aparece a un tamaño más grande cuando el usuario apunta con su cursor sobre ella, dándole más espacio para escribir.
Instrucciones
1 Coloque el siguiente código CSS entre las etiquetas "cabeza" de su documento HTML:
<Style type = "text / css">
.popoutwrapper {
position:relative;
}
.popout {
position:absolute;
Anchura: 150px;
altura: 20px;
}
.popout: hover {
width:250px;
altura: 120px;
izquierda: -50px;
arriba: -50px;
}
</ Style>
2 Agregue el código siguiente en el cuerpo del documento HTML:
<Span class = "popoutwrapper"> <textarea class = "popout"> Introduzca el texto aquí </ textarea> </ span>
3 Guarde la página y lo carga en un navegador Web. Mover el cursor del ratón sobre el cuadro de texto, y se hace más grande. Escriba algún texto en ella, a continuación, mover el cursor de distancia. El cuadro de texto se contrae de nuevo a su tamaño original.
4 Cambiar el tamaño normal del cuadro de texto con las propiedades de "altura" de la clase "popout" "ancho" y, y su tamaño ampliado en el "popout: hover" pseudo-clase. Dependiendo de su ubicación en la página y el contenido en torno a ella, partes de la caja ampliada puedan quedar fuera del área visible de la ventana. Esto se debe a las propiedades y de "izquierda", "top" se están utilizando para mantenerlo centrado en su lugar; eliminarlos para que el cuadro de crecer hacia abajo y hacia la derecha.
Consejos y advertencias
- Agregue la línea siguiente a la parte superior de su documento HTML, antes de la primera etiqueta "HTML", para garantizar la compatibilidad con Internet Explorer:
- <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">