Comment modifier l'apparence du bouton après avoir appuyé sur celui-ci à l'aide de la pseudo-classe :target ?

Sélecteur de bouton « appuyé »

Lorsque vous souhaitez modifier l'apparence d'un bouton après qu'il a été enfoncé, le sélecteur :active conventionnel peut ne pas suffire . Ce sélecteur ne se déclenche que lorsque le bouton est physiquement maintenu enfoncé.

Pour obtenir la fonctionnalité souhaitée, une approche alternative consiste à utiliser la pseudo-classe :target. Cette classe s'active lorsque le point d'ancrage correspondant (#btn dans ce cas) est ciblé.

Mise en œuvre :

Remplacez le tag avec une balise :

<code class="html"><a id="btn" href="#btn">Button</a></code>

Ajuster le CSS pour incorporer les pseudo-classes :active et :target :

<code class="css">a {
  display: block;
  font-size: 18px;
  border: 2px solid gray;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

a:active {
  font-size: 18px;
  border: 2px solid green;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

a:target {
  font-size: 18px;
  border: 2px solid red;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}</code>

Avec cette implémentation, le bouton apparaîtra dans un premier temps dans son état normal (blanc). Lorsqu'on clique dessus, il devient vert (état actif). Après avoir relâché le bouton, il passera à l'état rouge (état cible).

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!