Quand utilisez-vous les pseudo-classes :focus et :active ?

Distinction entre les pseudo-classes :focus et :active

Bien que les états de style :focus et :active puissent être activés via l'interaction de l'utilisateur, leur fonctionnalité diffère de manière significative.

:focus

• Représente un élément qui a reçu le focus de saisie et est prêt à accepter la saisie de l'utilisateur.
• Actif lorsqu'un l'élément est sélectionné à l'aide de la navigation au clavier, comme l'onglet key.

:active

• Représente un élément sur lequel l'utilisateur clique ou appuie activement.
• Accompagne souvent le : état de focus lorsqu'un élément reçoit le focus via un clic.

Clé Différences

• :focus indique qu'un élément a été sélectionné pour la saisie, tandis que :active implique qu'une action de clic ou d'appui est en cours.
• :le focus est déclenché par interaction basée sur le clavier, tandis que :active est déclenchée par des événements de souris ou tactiles.
• Lorsqu'un élément est cliqué, il passe généralement par :focus et :active États.

Exemple

Considérez le code HTML et CSS suivant :

<button>
  Click to Change Color
</button>

<style>
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>

Lorsque le bouton est initialement rendu, il a aucun état actif ou focalisé. Lorsque l'utilisateur utilise Tab pour lui donner le focus, il entre dans l'état :focus et le texte devient rouge. Si l'utilisateur clique ensuite sur le bouton, il entre dans l'état :active, ce qui fait que le texte devient rouge et gras.

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!