Qual é a diferença entre foco e ativo

““:foco”A pseudo-classe é usada para definir as propriedades CSS para o estado de um elemento quando a ação foi executada nele ou um elemento foi selecionado. Por outro lado, o “:ativo”Pseudo-classe define as propriedades CSS para a instância quando a ação está sendo executada e geralmente é acionada quando o usuário clica ou seleciona um determinado elemento.

Este post demonstrará o funcionamento do “:foco" e ":ativo”Pseudo -classes e a diferença entre elas.

: foco vs: ativo

O ":ativo”É acionado exatamente no momento ou instância, o usuário clica em um elemento e desaparece quando o usuário sai do mouse clique. Por exemplo, ele é acionado quando um botão é clicado e o efeito desaparece quando o mouse é liberado. Mas, após o evento (um clique no botão), o efeito das propriedades adicionadas no “:focoPseudo-classe permanece.

Exemplo: Criando um botão com: foco e: ativo

Vamos entender isso com um exemplo prático simples, criando um botão e adicionando o “:foco" e ":ativo”Pseudo-classes:

A cor deste texto mudará quando você clicar neste botão
Ele será exibido como texto em negrito quando clicado

No trecho de código acima:

• Há uma classe div chamada “minha classe”. O objetivo do elemento div contendo essa classe é apenas alinhar o conteúdo dentro dele ao centro.
• Então, há um “”Tag para criar um botão e entre as tags de botão de abertura e fechamento está o texto a ser exibido no botão.

O ":foco" e ":ativo”Pseudo-classes para o trecho de código HTML acima pode ser adicionado no elemento de estilo CSS como o seguinte:

botão
peso-fonte: normal;
cor preta;
margem: 30px;

Botão: foco
Cor: Fuchsia;

Botão: ativo
intensidade da fonte: Negrito;

.minha classe
Alinhamento de texto: centro;

No elemento de estilo CSS acima:

• Há um seletor referente ao elemento do botão em que as propriedades do CSS, i.e., ““espessura da fonte","cor" e "margem”Foram definidos.
• No "Botão: foco”Pseudo-classe, o valor do“cor”A propriedade é definida como“fúcsia”. Isso virará a cor do texto para "fúcsia" quando o botão for clicado.
• No "Botão: ativo”Pseudo-classe, o“espessura da fonte”A propriedade CSS é definida como“audacioso”, Isso ousado o texto do botão na instância quando o usuário clicar no botão.
• Em seguida, o seletor de classe adicionado refere -se ao elemento div e o “Alinhamento de texto: centro”A propriedade CSS foi adicionada para alinhar o botão criado dentro do elemento div no centro.

O ":foco" e ":ativo”Pseudo-classes funcionam da seguinte maneira em coordenação com as propriedades:

Isso era tudo sobre as funcionalidades do “:foco" e ":ativo”E a diferença entre eles.

Conclusão

O ":foco" e ":ativo”Pseudo-classes são usadas para definir as propriedades CSS para os elementos nos casos em que um determinado evento é realizado em um elemento HTML. O efeito das propriedades definidas na pseudo-classe “: ativo” desaparece instantaneamente após o evento como um clique do mouse, mas o efeito das propriedades definidas no “: foco” pseudo-classe permanece após o evento realizado no elemento.