Cómo establecer AHOVER basado en la clase

":flotar"Es uno de los pseudo-clase más populares que se usa para agregar efecto a cualquier elemento en el mouse o cursor. Se reconoce solo en la hoja de estilo CSS, lo que significa que no se puede aplicar en CSS en línea. Para aplicar ": flotar" en el elemento, es mejor asignar el atributo de clase o identificación al elemento y utilizar esta pseudo-clase a la hoja de estilo para agregar el efecto de desplazamiento.

Este tutorial explicará:

• ¿Qué es "A: flotante" en CSS??
• Cómo establecer "A: Hover" basado en la clase?

¿Qué es "A: flotante" en CSS??

"A: flotante"Se usa para agregar un efecto de desplazamiento en los enlaces de incrustación o etiqueta de anclaje. Aquí, "A: Hover" incluye etiquetas de anclaje ""Y" Peudoclase ": Hover". Generalmente se usa para activar el elemento "" en CSS. También puede agregar efectos al elemento "A" alterando el color del enlace, el estilo del cursor, el color de fondo y muchos más.

Cómo establecer "A: Hover" basado en la clase?

Para establecer "A: flotante"Basado en la clase, pruebe las instrucciones dadas.

Paso 1: Haga un contenedor "Div"

Inicialmente, cree un contenedor con la ayuda del ""Etiqueta y asigna un"identificación" atributo.

Paso 2: crea otro contenedor "div"

A continuación, cree un anidado "div"Contenedor entre el primer contenedor y asigne un"clase"Atributo con un nombre en particular.

Paso 3: insertar la etiqueta ""

A continuación, inserte el ""Etiqueta que se utiliza para vincular una página a otra. Luego, inserte el atributo mencionado dentro de la etiqueta de apertura "", donde:

• "clase"Se utiliza para identificar de manera única el elemento con un nombre.
• "hrefEl atributo se utiliza para contener la URL de otra página o dirección de destino:

Pagina principal
Hogar
Acerca de mí

La salida del código anterior es el siguiente:

Paso 4: diseñe el principal "div" contenedor

Para diseñar el contenedor principal "Div", en primer lugar, acceda al ""Elemento por nombre de identificación con el"#"Selector. En nuestro caso, hemos usado "#-Div principal". A continuación, aplique las propiedades de la lista a continuación:

#principal-div
borde: 3px azul sólido;
margen: 20px 50px;
relleno: 50px;
tamaño de fuente: más grande;
Color de fondo: Bisque;

Aquí:

• El "borde"La propiedad se usa para definir un límite o un bosquejo alrededor del elemento.
• "margen"Asigna un espacio fuera del límite definido.
• "relleno"Se usa para especificar el espacio dentro del límite definido y alrededor del contenido del elemento.
• "tamaño de fuente"La propiedad determina el tamaño de la fuente.
• "color de fondo"Se utiliza para establecer el color en la parte posterior del elemento dentro de un límite.

Producción

Paso 5: Establecer "A: Hover" basado en la clase

Ahora, acceda al interior "div"Elemento usando la clase asignada con selector de puntos".menú principal"Y utiliza el"A: flotante"Pseudo clase para agregar un efecto flotante al"" elemento.

Para este propósito, aplique las propiedades mencionadas:

.Menu principal A: Hover
Color: RGB (247, 137, 12);
Border: 2px de azul punteado;
Radio fronterizo: 20%;

Aquí está la descripción del código mencionado anteriormente:

• "colorLa propiedad se utiliza para establecer el color del texto.
• "borde"Define un límite alrededor del"" elemento. Por ejemplo, hemos aplicado un borde azul punteado en el flotador.
• "radio fronterizo"Establece los bordes del elemento en forma redondeada:

Eso se trataba de establecer A: desplazamiento basado en la clase en CSS.

Conclusión

Para establecer el "A: flotante"Pseudo-Clase basada en la clase, primero, cree un contenedor DIV utilizando el""Etiqueta y asigna un atributo de clase. Luego, inserte un ""Elemento para vincular otra página web. Después de eso, acceda al elemento "Div" con la ayuda de la clase y aplique el efecto de desplazamiento en el enlace usando "A: Hover". Esta publicación ha demostrado el método para establecer el "A: Hover" basado en la clase.