Comment changer facilement une image en un clic avec CSS ?

Changer une image en un clic en toute simplicité

Fatigué du code JS complexe requis pour modifier une image en un clic ? Explorez une solution plus simple à l'aide de pseudo-sélecteurs ou de la classe .active.

Comprendre la solution

Pour modifier une image en un clic sans code JS étendu, vous pouvez exploiter les éléments suivants techniques :

• Pseudo-sélecteurs : Vous pouvez créer un pseudo-sélecteur qui cible l'élément lors d'un clic et le stylise avec une image différente en utilisant CSS.
• .Classe active : En appliquant la classe .active à l'élément cible au clic, vous pouvez utiliser CSS pour afficher l'image souhaitée.

Mise en œuvre de la solution

Utilisation de pseudo-sélecteurs :

li:hover img, li:active img {
    display: none;
}

li:hover img#new_image, li:active img#new_image {
    display: block;
}

Utilisation de la classe .active :

1. Ajoutez la classe .active à l'élément de liste cible : li.active.
2. Définissez la règle CSS pour cette classe :

li.active img {
    display: none;
}

li.active img#new_image {
    display: block;
}

Exemple de code avec la classe .active :

<ul>
  <li><img>

Remarque : N'oubliez pas d'ajouter l'écouteur d'événement de clic approprié ou d'utiliser les attributs onclick en ligne pour déclencher le changement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!