Simuler l'événement Onclick en CSS

1. Utilisez le Checkbox Hack pour simuler un événement Onclick en CSS
2. Utilisez la pseudo-classe :target pour simuler un événement Onclick en CSS
3. Utilisez la pseudo-classe :focus et l’attribut tabindex pour simuler l’événement Onclick en CSS

Cet article présente des méthodes pour simuler des événements onclick en CSS.

Utilisez le Checkbox Hack pour simuler un événement Onclick en CSS

Nous ne pouvons pas obtenir l’événement JavaScript onclick exact en CSS. Cependant, nous pouvons utiliser une astuce CSS pour simuler un événement onclick. Le concept de base derrière cette astuce est l’utilisation d’une case à cocher et de la balise label. Nous pouvons les attacher en utilisant la même valeur pour l’attribut id dans la case à cocher et l’attribut for dans label. En cliquant sur l’étiquette, vous cochez et décochez la case. Ainsi, nous pouvons utiliser le sélecteur :checked pour sélectionner la case à cocher lorsqu’elle est cliquée. Nous utiliserons le sélecteur de frère adjacent, +, pour sélectionner la balise img à l’intérieur du label avec la case à cocher. Ainsi, lorsque la case est cochée, nous pouvons sélectionner l’image et modifier ses dimensions. Par conséquent, nous pouvons réaliser la fonctionnalité onclick en utilisant CSS.

Par exemple, créez une case à cocher à partir de la balise <input>. Définissez le id de la case à cocher sur btn. En dessous, écrivez une balise <label> et écrivez la même valeur btn que la valeur de l’attribut for. À l’intérieur de la balise d’étiquette, insérez une image. Ensuite, en CSS, sélectionnez l’id btn avec le sélecteur CSS et réglez l’affichage display sur none. Par la suite, utilisez le sélecteur :checked sur l’identifiant btn comme #btn:checked. Utilisez l’opérateur + pour sélectionner la balise img à l’intérieur de la balise label. Après avoir sélectionné, définissez la hauteur et la largeur sur 75px.

Ici, lorsque nous cliquons sur l’image, la taille de l’image diminue. Initialement, l’image est de taille 100px. Ainsi, nous avons réalisé la fonctionnalité onclick en utilisant CSS.

Exemple de code :

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

Utilisez la pseudo-classe :target pour simuler un événement Onclick en CSS

Nous pouvons utiliser la pseudo-classe :target pour simuler l’événement onlick uniquement en utilisant CSS. La pseudo-classe permet de styliser l’élément actif en CSS. Dans cette méthode, le concept central est de changer la propriété display des éléments. Lorsque l’élément est inactif, nous pouvons régler l’affichage sur none et le changer en block lorsque l’élément est sélectionné avec la pseudo-classe :target. On peut styler l’élément dont id correspond au fragment de l’URL avec la pseudo-classe :target.

Par exemple, écrivez une balise anchor avec l’URL #day. Écrivez le texte What day is today? à l’intérieur de l’étiquette. En dessous, créez un élément div avec l’id day. Écrivez le texte Sunday à l’intérieur du div. En CSS, sélectionnez le id day avec le sélecteur d’identifiant et définissez la propriété display sur none. Ensuite, sélectionnez le même id avec la pseudo-classe :target et définissez la propriété display sur block.

Dans l’exemple ci-dessous, lorsque nous cliquons sur le texte What day is today?, Sunday apparaîtra. Nous avons utilisé la classe :target pour changer l’affichage de l’élément caché en visible. De cette façon, nous pouvons simuler des événements onclick en CSS.

Exemple de code :

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

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

Utilisez la pseudo-classe :focus et l’attribut tabindex pour simuler l’événement Onclick en CSS

Nous pouvons utiliser l’attribut tabindex dans la balise img et la pseudo-classe :focus pour simuler des événements onclick en CSS. Par exemple, insérez une image avec la balise img avec l’identifiant comme pic et la valeur tabindex comme 0. En CSS, sélectionnez l’identifiant pic avec la pseudo-classe :focus. Ensuite, modifiez la hauteur et la largeur de l’image en 75px. La taille initiale de l’image était 100px. Ici, lorsque nous cliquons sur l’image, l’image changera sa taille en 75px. Par conséquent, nous pouvons réaliser l’événement onclick en utilisant uniquement CSS.

Exemple de code :

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

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