Méthode CSS uniquement pour modifier dynamiquement le src de l'image au clic sans utiliser JavaScript

Question

Je dois changer le src d'une image en cliquant sur la souris en utilisant uniquement CSS J'aime

img:active {
}

Answer 1

Vous pouvez y parvenir en utilisant l'attribut de remplacement d'élément de fonction content.

Veuillez noter que vous ne pouvez pas configurer d'ARIA ou d'autres fonctionnalités liées à l'accessibilité à l'aide de cette technologie, de sorte que les informations que vous transmettez peuvent être perdues pour une partie de votre base d'utilisateurs. (Cela peut être illégal en fonction de la nature des informations, de qui vous êtes et du contrôle auquel vous êtes soumis/commercialisé).

Vous souhaiterez peut-être définir tabindex ou envelopper l'image dans un bouton pour la rendre accessible via le clavier/etc.

A noter également que :active 表示“单击时”而不是“单击后”。 CSS 没有“点击后”伪类（尽管 :focus suffit dans certains cas).

img:active {
    content: url(http://placekitten.com/200/200);
}

<img src="http://placekitten.com/g/200/200" alt="">