Simule o evento Onclick em CSS

1. Use o hack da caixa de seleção para simular um evento Onclick em CSS
2. Use a Pseudo-classe :target para simular um evento Onclick em CSS
3. Use a Pseudo-classe :focus e o atributo tabindex para simular um evento Onclick em CSS

Este artigo apresenta métodos para simular eventos onclick em CSS.

Use o hack da caixa de seleção para simular um evento Onclick em CSS

Não podemos obter o evento onclick exato do JavaScript em CSS. No entanto, podemos usar um truque CSS para simular um evento onclick. O conceito central por trás desse truque é o uso de uma caixa de seleção e da tag label. Podemos anexá-los usando o mesmo valor para o atributo id na caixa de seleção e o atributo for em label. Clicar no rótulo irá marcar e desmarcar a caixa de seleção. Assim, podemos usar o seletor :checked para marcar a caixa de seleção quando ela for clicada. Usaremos o seletor irmão adjacente, +, para selecionar a tag img dentro do label junto com a caixa de seleção. Assim, quando a caixa de seleção estiver marcada, podemos selecionar a imagem e alterar suas dimensões. Portanto, podemos obter o recurso onclick usando CSS.

Por exemplo, crie uma caixa de seleção na tag <input>. Defina o id da caixa de seleção como btn. Abaixo dela, escreva uma tag <label> e escreva o mesmo valor btn que o valor do atributo for. Dentro da etiqueta do rótulo, insira uma imagem. Em seguida, em CSS, selecione o id btn com o seletor CSS e defina display como none. Em seguida, use o seletor :checked no id btn como #btn:checked. Use o operador + para selecionar a tag img dentro da tag label. Depois de selecionar, defina a altura e largura para 75px.

Aqui, quando clicamos na imagem, o tamanho da imagem diminui. Inicialmente, a imagem tem o tamanho 100px. Assim, alcançamos a funcionalidade onclick usando CSS.

Código de exemplo:

<input type="checkbox" id="btn"/>
<label for="btn">
    <img src="/img/DelftStack/logo.png" />
</label>

#btn{
    display: none;
}
#btn:checked + label > img {
    width: 75px;
    height: 75px;
}

Use a Pseudo-classe :target para simular um evento Onclick em CSS

Podemos usar a pseudo-classe :target para simular o evento onlick apenas usando CSS. A pseudo-classe ajuda a estilizar o elemento ativo em CSS. Neste método, o conceito central é alterar a propriedade display dos elementos. Quando o elemento está inativo, podemos definir a exibição para none e alterá-lo para block quando o elemento é selecionado com a pseudoclasse :target. Podemos definir o estilo do elemento cujo id corresponde ao fragmento da URL com a pseudoclasse :target.

Por exemplo, escreva uma tag anchor com o URL #day. Escreva o texto What day is today? dentro da tag. Abaixo dele, faça um elemento div com o id day. Escreva o texto Sunday dentro do div. No CSS, selecione o id day com o seletor de id e defina a propriedade display como none. Em seguida, selecione o mesmo id com a pseudoclasse :target e defina a propriedade display como block.

No exemplo abaixo, ao clicar no texto What day is today?, Aparecerá Sunday. Usamos a classe :target para alterar a exibição do elemento oculto para visível. Desta forma, podemos simular eventos onclick em CSS.

Código de exemplo:

<a href="#day">What day is today?</a>
<div id="day">Sunday</div>

#day {
    display: none;
}
#day:target {
    display: block;
}

Use a Pseudo-classe :focus e o atributo tabindex para simular um evento Onclick em CSS

Podemos usar o atributo tabindex na tag img e a pseudo-classe :focus para simular eventos onclick em CSS. Por exemplo, insira uma imagem com a tag img com id como pic e o valor tabindex como 0. Em CSS, selecione o id pic com a pseudo-classe :focus. Em seguida, altere a altura e largura da imagem para 75px. O tamanho inicial da imagem era 100px. Aqui, quando clicamos na imagem, ela muda de tamanho para 75px. Portanto, podemos realizar o evento onclick usando apenas CSS.

Código de exemplo:

 <img id="pic" tabindex="0" src="/img/DelftStack/logo.png" />

#pic:focus{
    width: 75px;
    height: 75px
 }