Tecnología

Inicio

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">