Comment changer le style du bouton après avoir cliqué au lieu de le maintenir enfoncé ?

Sélecteur de bouton enfoncé

Le code CSS fourni pour le bouton utilisant le sélecteur :active ne modifie pas le style du bouton tant qu'il n'est pas cliqué et détenu. Pour obtenir l'effet souhaité où le style du bouton change après avoir été enfoncé, une approche différente est nécessaire.

Au lieu d'utiliser le sélecteur :active, qui ne se déclenche que lorsque le bouton est cliqué, vous pouvez utiliser le : sélecteur de cible pour modifier le style du bouton après avoir cliqué dessus. Le sélecteur :target correspond à un élément qui est la cible de la référence de lien hypertexte actuelle.

Voici un exemple utilisant une balise d'ancrage () au lieu d'un bouton :

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

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

Dans cet exemple, la balise d'ancrage a un identifiant "btn" et un lien vers le même identifiant. Lorsque vous cliquez sur le lien, la balise d'ancrage devient la cible de la référence du lien hypertexte et le sélecteur :target est appliqué, changeant le style du bouton en rouge.

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!