El selector flotante es parte de la pseudo clase. Este efecto se usa para formatear el contenido en el HTML cuando el cursor del mouse pasa sobre él. Podemos aplicar este efecto a cualquier elemento. Este artículo proporciona algunos usos básicos de una clase flotante en HTML y CSS.

Propósito del efecto de desplazamiento

En cada documento o navegador utilizamos los enlaces a los sitios de soporte al usuario. Para este propósito, podemos diseñar los enlaces de las páginas que aún no han sido visitadas usando la clase selectora de enlaces. Del mismo modo, para los enlaces que ya han sido visitados, usamos el selector de visitas. Se utiliza un selector activo para las conexiones activas. Todos estos son estilos de enlace que muestran los efectos del desplazamiento. Si tanto el enlace como el selector de enlaces visitados están presentes en la definición de CSS, usamos una clase de selector flotante para ver el efecto resultante. Por otro lado, si queremos pasar el cursor sobre cualquier elemento en HTML, se producirán 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 del desplazamiento.

Sintaxis del elemento flotante

Content_of_HTML :hover{// declara el código CSS o los efectos que deseas aplicar.}

Ejemplo 1: Pasar el cursor cambia el color del texto

Este ejemplo trata de la transformación del texto cuando pasamos el puntero del ratón sobre él. Podemos aplicar las diferentes condiciones al texto. Pero ahora siguen los dos cambios básicos: el cambio de color del texto al que se aplica el desplazamiento y el resaltado del texto con un cambio de color de fondo. Comience con la sección de encabezado HTML y use la etiqueta de estilo dentro de ella, ya que estamos creando un estilo interno. Utilice la sección de estilo dentro de la

-Etiquetas. Se utiliza una clase flotante para aplicar todos los efectos al texto del título. Por lo tanto, h1 se usa con la clase hover. H1: hover {Color: white;Background-color: Purple;} Se aplican las dos propiedades que discutimos anteriormente. De forma predeterminada, el color del encabezado es negro y el color de fondo de la página web es blanco. Pero al pasar el mouse, el color de fondo de la parte especificada se vuelve púrpura, por lo que el color del texto también cambia a blanco.
Código HTMLCSS:

Cierre la etiqueta de estilo y la sección de encabezado del HTML. Un Título1 se declara en la dirección del cuerpo. La alineación para el Título1

se establece en centrado. Cierre todas las etiquetas y guarde el archivo del editor de texto. Para ejecutar la salida, necesitamos ejecutar el archivo en el navegador. Al guardar el archivo, se debe tener en cuenta una cosa: guardar el archivo con el final HTML en lugar del final de texto. Abra con el navegador predeterminado para que pueda obtener el resultado.
Producción:
La salida en el navegador se captura en forma de un video de unos pocos segundos, lo que da como resultado una visualización exagerada de los resultados. Cuando ejecute el archivo, verá que aparece un encabezado simple en el medio de la página web. Cuando colocamos el cursor cerca del encabezado o pasamos el puntero del mouse sobre el encabezado, el color de fondo y el color de la fuente cambiarán. Cada vez que se mueve el cursor hacia atrás, vuelve a la configuración predeterminada.

Ejemplo 2: Hover crea un bloque con texto

A diferencia del ejemplo anterior, donde el texto existente se modificó al pasar el mouse, este ejemplo agrega nuevo contenido HTML (bloque) que solo aparece cuando pasamos el mouse sobre el texto especificado. Este bloque también tiene algunas dimensiones y especificaciones. Vamos a explicar el procedimiento con más detalle. Comenzando con la sección CSS, diseñaremos un div. Este div crea un bloque de contenido, que es el resultado de pasar el cursor sobre el texto. El ancho y el alto son los dos valores básicos que se aplican para formar cualquier forma en HTML. Luego viene la propiedad Padding. Es el rango de espaciado del contenido dentro de un bloque o forma. Por ejemplo, incluimos algo de texto en el bloque, por lo que el espaciado del texto y el límite de la forma se usan como relleno. Usar solo el relleno significa que es el espacio dentro de la caja en cada lado. Si el relleno es de un lado específico, ya que usamos el relleno de la derecha, eso significa que es el espacio del lado derecho. Esta propiedad mantiene el texto dentro de los límites del bloque. De lo contrario, existe la posibilidad de que el texto se extienda más allá del borde del bloque.
relleno: 20 píxeles; relleno derecho: 50 píxeles;
Este efecto de relleno se aplica para alinear el contenido interno con el contenido externo. 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 trata sobre el encabezado que aplicamos al pasar el mouse. Debido a que el bloque de contenido se crea dentro del div, el div se incluye junto con este estilo de estilo. Se crea el contenido del formulario de bloque mencionado para formar un anuncio. H3: hover + div {display: block;} Después de eso, cierra las etiquetas de estilo y encabezado. Declarar un encabezado en texto HTML. Se forma un div. El texto mencionado dentro del bloque también está escrito en las etiquetas div. Cierre la etiqueta del cuerpo.
Código del cuerpo HTML:

Guarde el código en el archivo y ejecútelo en el navegador. Como salida del código anterior, tomamos una pequeña parte del video para explicar el funcionamiento de la clase Hover, la cual fue creada y diseñada para crear un bloque con un texto dentro del bloque.
Producción:
El video muestra que cuando ejecutamos el archivo en el navegador, se muestra un texto simple como encabezado. Pero cuando movemos el puntero del mouse sobre el texto, provoca un cambio en la página web. Al pasar el mouse, el texto del encabezado sigue siendo el mismo que estaba en el momento de la ejecución. Pero cada vez que movemos el cursor hacia el encabezado, se crea un bloque en el lado izquierdo de la página. Si alejamos el cursor del encabezado, el bloque desaparece. Esto se debe a que la clase Hover crea un bloque y texto en él. Todos los efectos en bloque y texto se aplican en CSS.

Conclusión

CSS hover es una propiedad que se utiliza para resaltar o resaltar el contenido HTML cuando pasamos el cursor sobre él. Esta característica se usa principalmente para notificar sobre algo. En este artículo, explicamos cómo funciona una clase de desplazamiento y cómo el contenido HTML se convierte en desplazamientos. Para comenzar, dimos una breve descripción general de la clase Hover. Hemos implementado los dos ejemplos básicos de efectos de desplazamiento. El primer ejemplo incluye el efecto en el texto existente, mientras que el segundo ejemplo se trata de mostrar una forma adicional que flota sobre el texto existente mientras mantiene el texto existente igual.