¿Cuál es la diferencia entre enfoque y activo?

":enfocar"La pseudo-clase se usa para definir las propiedades de CSS para el estado de un elemento cuando la acción se ha realizado en él o se ha seleccionado un elemento. Por otro lado, el ":activo"La pseudo-clase define las propiedades de CSS para la instancia cuando se realiza la acción y generalmente se activa cuando el usuario hace clic o selecciona un cierto elemento.

Esta publicación demostrará el funcionamiento del ":enfocar" y ":activo"Clases de pseudo y la diferencia entre ellas.

: Focus vs: activo

El ":activo"Se activa exactamente en el momento o instancia, el usuario hace clic en un elemento y desaparece cuando el usuario deja el clic del mouse. Por ejemplo, se activa cuando se hace clic en un botón y el efecto desaparece cuando el mouse está configurado. Pero, después del evento (un clic de botón), el efecto de las propiedades agregadas en el ":enfocar"Permanece pseudo-clase.

Ejemplo: Crear un botón con: Focus y: Active

Entendamos esto con un ejemplo práctico simple creando un botón y luego agregando el ":enfocar" y ":activo"Pseudo-clases:

El color de este texto cambiará cuando haga clic en este botón
Se mostrará como texto en negrita cuando se haga clic en

En el fragmento de código anterior:

• Hay una clase div llamada "mi clase". El propósito del elemento div contiene esa clase es solo alinear el contenido dentro del centro.
• Entonces, hay un ""Etiqueta para crear un botón, y entre las etiquetas del botón de apertura y cierre se encuentra el texto que se mostrará en el botón.

El ":enfocar" y ":activo"Las pseudo-clases para el fragmento de código HTML anterior se pueden agregar en el elemento de estilo CSS como el siguiente:

botón
Font-peso: Normal;
de color negro;
margen: 30px;

Botón: Focus
Color: fucsia;

botón: activo
Font-Weight: Bold;

.mi clase
Text-Align: Center;

En el elemento de estilo CSS arriba:

• Hay un selector que se refiere al elemento de botón en el que las propiedades CSS, i.mi., "pescado","color" y "margen"Han sido definidos.
• En el "Botón: Focus"Pseudo-Clase, el valor del"color"La propiedad se define como"fucsia". Esto convertirá el color del texto en "fucsia" cuando se haga clic en el botón.
• En el "Botón: Activo"Pseudo-Clase, el"pescado"La propiedad CSS se define como"atrevido", Esto se negará al texto del botón en la instancia cuando el usuario haga clic en el botón.
• A continuación, el selector de clase agregado se refiere al elemento div y al "TEXT-ALEGIO: CentroSe ha agregado la propiedad CSS para alinear el botón creado dentro del elemento DIV al centro.

El ":enfocar" y ":activoLos pseudo-clases funcionan de la siguiente manera en coordinación con las propiedades:

Esto se trataba de las funcionalidades del ":enfocar" y ":activo"Y la diferencia entre ellos.

Conclusión

El ":enfocar" y ":activo"Las pseudo-clases se utilizan para definir las propiedades de CSS para los elementos en los casos en que se realiza un evento determinado en un elemento HTML. El efecto de las propiedades definidas en el pseudo-clase ": Active" desaparece instantáneamente después del evento como un clic del mouse, pero el efecto de las propiedades definidas en el pseudo-clase ": Focus" permanece después del evento realizado en el elemento.