Simular el evento Onclick en CSS

1. Utilice el truco de la casilla de verificación para simular un evento al hacer clic en CSS
2. Utilice la pseudoclase :target para simular un evento Onclick en CSS
3. Utilice la pseudoclase :focus y el atributo tabindex para simular el evento Onclick en CSS

Este artículo presenta métodos para simular eventos onclick en CSS.

Utilice el truco de la casilla de verificación para simular un evento al hacer clic en CSS

No podemos lograr el evento onclick de JavaScript exacto en CSS. Sin embargo, podemos usar un truco CSS para simular un evento onclick. El concepto central detrás de este truco es el uso de una casilla de verificación y la etiqueta label. Podemos adjuntarlos usando el mismo valor para el atributo id en la casilla de verificación y el atributo for en label. Al hacer clic en la etiqueta, se marcará y desmarcará la casilla de verificación. Por lo tanto, podemos usar el selector :checked para seleccionar la casilla de verificación cuando se hace clic en ella. Usaremos el selector de hermanos adyacente, +, para seleccionar la etiqueta img dentro de la label junto con la casilla de verificación. Así, cuando la casilla de verificación está marcada, podemos seleccionar la imagen y cambiar sus dimensiones. Por lo tanto, podemos lograr la función onclick usando CSS.

Por ejemplo, cree una casilla de verificación a partir de la etiqueta <input>. Establezca el id de la casilla de verificación como btn. Debajo, escriba una etiqueta <label> y escriba el mismo valor btn que el valor del atributo for. Dentro de la etiqueta de la etiqueta, inserte una imagen. A continuación, en CSS, seleccione el id btn con el selector de CSS y establezca display en none. Posteriormente, utilice el selector :checked en la identificación de btn como #btn:checked. Utilice el operador + para seleccionar la etiqueta img dentro de la etiqueta label. Después de seleccionar, establezca la altura y el ancho en 75px.

Aquí, cuando hacemos clic en la imagen, el tamaño de la imagen disminuye. Inicialmente, la imagen tiene un tamaño de 100px. Por lo tanto, logramos la funcionalidad onclick usando CSS.

Código de ejemplo:

<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;
}

Utilice la pseudoclase :target para simular un evento Onclick en CSS

Podemos usar la pseudoclase :target para simular el evento onlick solo usando CSS. La pseudoclase ayuda a diseñar el elemento activo en CSS. En este método, el concepto central es cambiar la propiedad display de los elementos. Cuando el elemento está inactivo, podemos configurar la pantalla en none y cambiarla a block cuando el elemento se selecciona con la pseudoclase :target. Podemos diseñar el elemento cuyo id coincide con el fragmento de la URL con la pseudoclase :target.

Por ejemplo, escriba una etiqueta anchor con la URL #day. Escribe el texto What day is today? dentro de la etiqueta. Debajo de él, haga un elemento div con el id day. Escriba el texto Sunday dentro del div. En CSS, seleccione el id day con el selector de id y establezca la propiedad display en none. A continuación, seleccione el mismo id con la pseudoclase :target y establezca la propiedad display en block.

En el siguiente ejemplo, cuando hacemos clic en el texto What day is today?, Aparecerá Sunday. Usamos la clase :target para cambiar la visualización del elemento oculto a visible. De esta forma, podemos simular eventos onclick en CSS.

Código de ejemplo:

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

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

Utilice la pseudoclase :focus y el atributo tabindex para simular el evento Onclick en CSS

Podemos usar el atributo tabindex en la etiqueta img y la pseudoclase :focus para simular eventos onclick en CSS. Por ejemplo, inserte una imagen con la etiqueta img con id como pic y el valor tabindex como 0. En CSS, seleccione la identificación pic con la pseudoclase :focus. Luego, cambie la altura y el ancho de la imagen a 75px. El tamaño inicial de la imagen era 100px. Aquí, cuando hacemos clic en la imagen, la imagen cambiará su tamaño a 75px. Por lo tanto, podemos lograr el evento onclick usando solo CSS.

Código de ejemplo:

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

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