Cómo simular el evento OnClick en CSS

Un clic en un elemento desencadena el evento OnClick. Este evento puede validar el formulario, proporcionar mensajes de advertencia y más. Las casillas de verificación en CSS son la mejor manera de simular eventos en consecuencia. Este artículo demuestra cómo puede simular el evento OnClick usando CSS.

Cómo simular el evento OnClick en CSS?

Para simular una técnica de casilla de verificación de eventos en OnClick, se utiliza. Antes de avanzar primero, aprendemos qué es una casilla de verificación.

¿Qué es una casilla de verificación en CSS??

La casilla de verificación es una técnica que puede controlar la apariencia de ciertos elementos, como alternar la visibilidad de las pestañas, los menús desplegables y muchos más.

Sintaxis

La sintaxis de la casilla de verificación se da a continuación:

: Se usa para tomar la entrada del usuario.

identificación: Es el nombre de la clase que hemos asignado.

Pasemos al ejemplo práctico en el que aplicaremos el evento OnClick en una imagen.

Ejemplo: cómo simular el evento OnClick?

Aquí lo haremos:

• • Cree una casilla de verificación usando la etiqueta y asigne ID "al hacer clic".
  • Escribe una etiqueta, igual que ID. Ambos deberían ser lo mismo.
  • Inserte una imagen usando la etiqueta:

Después de eso, muévase al CSS y escriba el siguiente código:

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

En el código mencionado anteriormente, hemos implementado:

• • A ":comprobado"Selector en la clase llamado"al hacer clic".
  • Hemos seleccionado una imagen dentro de la etiqueta usando el operador +.
  • En el siguiente paso, hemos asignado la altura y el ancho de la imagen.

Nos dará la siguiente salida:

Salida verificado que el evento OnClick se ha aplicado a la imagen con éxito.

Conclusión

En CSS, podemos simular el evento OnClick usando la casilla de verificación. Para hacer eso, agregue una casilla de verificación usando la etiqueta y asigne un "identificación". A continuación, cree una etiqueta y asigna un valor igual que "identificación". En el archivo CSS, agregue un ":comprobadoSelector en la clase dirigida y seleccione la imagen dentro de la etiqueta utilizando el operador +. Este artículo explicó cómo simular el evento OnClick usando CSS, junto con sus ejemplos.