El selector de ciervo es parte de la pseudo-clase. Este efecto se usa para diseñar el contenido en el HTML cuando el cursor del ratón se cierne sobre ellos. Podemos aplicar este efecto a cualquier elemento. Este artículo contiene algún uso básico de una clase de desplazamiento en HTML y CSS.

Propósito del efecto flotante

En cualquier documento o navegador, utilizamos los enlaces a los sitios web para la ayuda del usuario. Para este propósito, podemos diseñar los enlaces para las páginas que aún no se visitan utilizando la clase Selector de enlaces. Del mismo modo, para aquellos enlaces que ya se visitan, utilizamos el selector visitado. Se utiliza un selector activo para los enlaces activos. Estos son todos los estilos de enlace que muestran los efectos en el flotador. Si el enlace y el selector de los enlaces que se visitan están presentes en la definición de CSS, utilizamos una clase selectora de desplazamiento para ver el efecto resultante.

Por otro lado, cada vez que queremos pasar el paso en cualquier elemento en HTML, causa algunos efectos mediante el uso de algunas propiedades en CSS, ya sea en el contenido existente o en la forma del nuevo elemento como resultado de flotar.

Sintaxis del elemento flotante

Content_of_html: hover
// declara el código o los efectos CSS que desea aplicar.

Ejemplo 1: el flotador cambia el color del texto

Este ejemplo trata con la transformación del texto cuando movemos el cursor del mouse hacia él. Podemos aplicar las diversas condiciones al texto. Pero por ahora, los dos cambios básicos que siguen son: el cambio en el color del texto en el que se aplica el flotante y el resaltado del texto con un cambio en el color de fondo.

Comenzando con la sección Head HTML, use la etiqueta de estilo dentro de ella mientras estamos haciendo un estilo interno. Use la sección de estilo dentro de la etiqueta. Se utiliza una clase de flujo para aplicar todos los efectos en el texto del encabezado. Entonces, H1 se usa con la clase Hover.

H1: Hover
Color blanco;
Color de fondo: morado;

Las dos propiedades, como discutimos anteriormente, se aplican. Por defecto, el color del encabezado es negro y el color de fondo de la página web es blanco. Pero en el flotador, el color de fondo de esa porción especificada se vuelve púrpura, por lo que el color del texto también se cambia a blanco.

Código CSS HTML:

Cierre la etiqueta de estilo y la sección principal de HTML. Moviéndose hacia la porción del cuerpo, se declara un encabezado1. La alineación del encabezado1

está establecido en el centro. Cierre todas las etiquetas y guarde el archivo de editores de texto. Para ejecutar la salida, necesitamos ejecutar el archivo en el navegador. Al guardar el archivo, se debe tener en cuenta una cosa: guarde el archivo con la extensión HTML en lugar de guardarlo con la extensión de texto. Abra con el navegador predeterminado para que pueda obtener la salida.

Producción:
Video Playerhttps: // Linuxhint.com/wp-content/uploads/2022/06/video2.MP400: 0000: 0000: 10 Utilice las teclas de flecha hacia arriba/hacia abajo para aumentar o disminuir el volumen.

La salida en el navegador se captura en forma de un video de unos pocos segundos que conduce al exceso de mostrar los resultados. En la ejecución del archivo, verá que aparece un encabezado simple en el centro de la página web. Cuando llevamos el cursor cerca del encabezado o desplazamiento sobre el encabezado, el color de fondo y el color de la fuente cambian. Cada vez que se retrocede el cursor, vuelve al valor predeterminado.

Ejemplo 2: Hover construye un bloque con texto

A diferencia del ejemplo anterior en el que se cambió el texto existente en Hover, en este ejemplo, se agrega un nuevo contenido (bloque) de HTML que se muestra solo cuando pasamos el texto especificado. Este bloque también tiene algunas dimensiones y especificaciones. Hagamos elaborar el procedimiento.

Comenzando con la sección CSS, nos dio un div. Este Div crea un bloque de contenido que es el resultado de flotar sobre el texto. El ancho y la altura son los dos valores básicos aplicados para formar cualquier forma en HTML. El siguiente es la propiedad del relleno. Es el área de distancia del contenido dentro de un bloque o una forma. Por ejemplo, hemos tomado un texto dentro del bloque, por lo que la distancia del texto y el límite de la forma se toma como el relleno. Si solo se usa el relleno, entonces significa que es la distancia dentro de la caja en cada lado. Si el relleno se realiza desde un lado específico, ya que usamos el relleno de la derecha, entonces significa que es la distancia en el lado derecho. Esta propiedad mantiene el texto dentro del límite del bloque. De lo contrario, hay posibilidades de exceder el texto fuera del borde del bloque.

Relleno: 20px;
Right de relleno: 50px;

Este efecto de relleno se aplica para alinear el contenido interno con el contenido exterior. El valor se toma en píxeles.

Código CSS:

El tamaño de fuente y el color de fuente del texto se aplican al texto dentro del bloque. La siguiente sección de estilo es sobre el encabezado que aplicamos en el flotador. Como el bloque de contenido se crea dentro del div, Div se incluye en este tipo de estilo juntos. Se crea el contenido de la forma del bloque que se menciona para formar una pantalla.

H3: Hover + Div
Bloqueo de pantalla;

Después de eso, cierre el estilo y las etiquetas de la cabeza. Declarar un rumbo dentro del cuerpo HTML. Se forma un div. El texto que se mencionará dentro del bloque también se escribe dentro de las etiquetas Div. Cierre la etiqueta del cuerpo.

Código de carrocería HTML:

Guarde el código en el archivo y ejecutarlo en el navegador. Como salida del código anterior, tomamos una pequeña porción del video para dar más detalles sobre el funcionamiento de la clase Hover que se crea y diseña para crear un bloque con un texto dentro del bloque.

Producción:
Video Playerhttps: // Linuxhint.com/wp-content/uploads/2022/06/video3.MP400: 0000: 0000: 13 Utilice las teclas de flecha hacia arriba/abajo para aumentar o disminuir el volumen.

El video muestra que se muestra un texto simple como encabezado cuando ejecutamos el archivo en el navegador. Pero cuando pasamos el tiempo sobre el texto, causa un cambio en la página web. En el flotador, el texto del encabezado sigue siendo el mismo que en el momento de la ejecución. Pero se crea un bloque en el lado izquierdo de la página cada vez que movemos el cursor hacia el encabezado. Cuando alejamos el cursor del encabezado, el bloque desaparece. Esto se debe a que la clase de desplazamiento crea un bloque y texto dentro de ella. Todos los efectos en el bloque y el texto se aplican en CSS.

Conclusión

CSS Hover es una propiedad que se utiliza para prominente o resaltar el contenido HTML cuando movemos el cursor hacia ellos. Esta función se usa principalmente para notificar sobre algo. En este artículo, explicamos el funcionamiento de una clase de desplazamiento y cómo los contenidos HTML se transforman en el flotador. Al principio, dimos una breve descripción de la clase de desplazamiento. Implementamos los dos ejemplos básicos del efecto flotante. El primer ejemplo contiene el efecto en el texto existente, mientras que el segundo ejemplo se trata de mostrar una forma adicional flotando hacia el texto existente, mientras que el texto existente sigue siendo el mismo.