Como simular o evento OnClick no CSS

Como simular o evento OnClick no CSS

Um clique em um elemento desencadeia o evento OnClick. Este evento pode validar o formulário, fornecer mensagens de aviso e mais. As caixas de seleção no CSS são a melhor maneira de simular eventos OnClick. Este artigo demonstra como você pode simular o evento OnClick usando CSS.

Como simular o evento OnClick no CSS?

Para simular uma técnica de caixa de seleção de evento OnClick, é usado. Antes de seguir em frente primeiro, aprendemos o que é uma caixa de seleção.

O que é uma caixa de seleção no CSS?

A caixa de seleção é uma técnica que pode controlar a aparência de certos elementos, como alternar a visibilidade de guias, menus suspensos e muitos mais.

Sintaxe

A sintaxe da caixa de seleção é fornecida abaixo:


: É usado para receber a entrada do usuário.

eu ia: É o nome da classe que atribuímos.

Vamos passar para o exemplo prático em que aplicaremos o evento OnClick em uma imagem.

Exemplo: como simular o evento OnClick?

Aqui vamos:

    • Crie uma caixa de seleção usando a tag e atribua ID “ONCLICK”Para isso.
    • Escreva uma tag, o mesmo que id. Ambos devem ser iguais.
    • Insira uma imagem usando tag:


Depois disso, vá para o CSS e escreva o seguinte código:

#OnClick: Checked + Label> IMG
Largura: 100px;
Altura: 75px;


No código acima mencionado, implementamos:

    • A ":verificado"Seletor na classe chamada"ONCLICK”.
    • Selecionamos uma imagem dentro da etiqueta usando o operador +.
    • Na próxima etapa, atribuímos a altura e a largura da imagem.

Isso nos dará a seguinte saída:


A saída verificou que o evento OnClick foi aplicado à imagem com sucesso.

Conclusão

No CSS, podemos simular o evento OnClick usando a caixa de seleção. Para fazer isso, adicione uma caixa de seleção usando tag e atribua um "eu ia”Para isso. Em seguida, crie uma tag e atribua um valor igual a “eu ia”. No arquivo CSS, adicione um “:verificado”Seletor na classe direcionada e selecione a imagem dentro da etiqueta usando o operador +. Este artigo explicou como simular o evento OnClick usando CSS, junto com seus exemplos.