Come simulare l'evento OnClick in CSS

Un clic su un elemento innesca l'evento OnClick. Questo evento può convalidare il modulo, fornire messaggi di avvertimento e altro ancora. Le caselle di controllo in CSS sono il modo migliore per simulare eventi OnClick. Questo articolo dimostra come puoi simulare l'evento OnClick usando CSS.

Come simulare l'evento OnClick in CSS?

Per simulare una tecnica di controllo eventi OnClick viene utilizzata. Prima di andare avanti prima, apprendiamo cos'è una casella di controllo.

Cos'è una casella di controllo in CSS?

La casella di controllo è una tecnica in grado di controllare l'aspetto di alcuni elementi, come attivare la visibilità di schede, menu a discesa e molti altri.

Sintassi

La sintassi della casella di controllo è riportata di seguito:

: Viene utilizzato per prendere l'input dall'utente.

id: È il nome della classe che abbiamo assegnato.

Passiamo all'esempio pratico in cui applicheremo l'evento OnClick su un'immagine.

Esempio: come simulare l'evento OnClick?

Qui lo faremo:

• • Crea una casella di controllo utilizzando Tag e Assegna ID "al clic"Ad esso.
  • Scrivi un tag, come ID. Entrambi dovrebbero essere lo stesso.
  • Inserire un'immagine usando il tag:

Successivamente, spostati sul CSS e scrivi il seguente codice:

#onclick: controllato + etichetta> img
larghezza: 100px;
Altezza: 75px;

Nel codice sopra menzionato, abbiamo implementato:

• • UN ":controllato"Selettore nella classe denominata"al clic".
  • Abbiamo selezionato un'immagine all'interno dell'etichetta utilizzando l'operatore +.
  • Nel passaggio successivo, abbiamo assegnato l'altezza e la larghezza dell'immagine.

Ci darà il seguente output:

L'output ha verificato che l'evento OnClick è stato applicato all'immagine correttamente.

Conclusione

In CSS, possiamo simulare l'evento OnClick utilizzando la casella di controllo. Per fare ciò, aggiungi una casella di controllo utilizzando il tag e assegna un "id"Ad esso. Quindi, crea un tag e assegnalo un valore come "id". Nel file CSS, aggiungi un ":controllato"Selettore nella classe mirata e selezionare l'immagine all'interno dell'etichetta usando l'operatore +. Questo articolo ha spiegato come simulare un evento OnClick usando CSS, insieme ai suoi esempi.