Quelle est la différence entre «Focus» et «Active»

":se concentrer«La pseudo-classe est utilisée pour définir les propriétés CSS pour l'état d'un élément lorsque l'action a été effectuée sur elle ou un élément a été sélectionné. D'un autre côté, le «:actif»Pseudo-classe définit les propriétés CSS pour l'instance lorsque l'action est effectuée et qu'elle est généralement déclenchée lorsque l'utilisateur clique ou sélectionne un certain élément.

Ce message démontrera le fonctionnement du «:se concentrer" et ":actif”Pseudo Classes et la différence entre eux.

: Focus vs: actif

Le ":actif"Est déclenché exactement au moment ou à l'instance que l'utilisateur clique sur un élément et disparaît lorsque l'utilisateur quitte le clic de la souris. Par exemple, il est déclenché lorsqu'un bouton est cliqué et que l'effet disparaît lorsque la souris est libérée. Mais, après l'événement (un clic de bouton), l'effet des propriétés ajouté dans le ":se concentrer»Pseudo-classe reste.

Exemple: création d'un bouton avec: focus et: actif

Comprenons cela avec un exemple pratique simple en créant un bouton, puis en ajoutant le ":se concentrer" et ":actif”Pseudo-classes:

La couleur de ce texte changera lorsque vous cliquez sur ce bouton
Il sera affiché comme texte audacieux lorsque vous cliquez sur

Dans l'extrait de code ci-dessus:

• Il y a une classe div nommée «Ma classe". Le but de l'élément div contenant cette classe est juste pour aligner le contenu à l'intérieur du centre.
• Ensuite, il y a un «”Tag pour créer un bouton, et entre les balises de bouton d'ouverture et de clôture est le texte à afficher sur le bouton.

Le ":se concentrer" et ":actif»Pseudo-classes pour l'extrait de code HTML ci-dessus peut être ajoutée dans l'élément de style CSS comme ce qui suit:

bouton
Police-poids: normal;
la couleur noire;
marge: 30px;

Bouton: Focus
Couleur: Fuchsia;

bouton: actif
Police-poids: Bold;

.Ma classe
Texte-aligne: Centre;

Dans l'élément de style CSS ci-dessus:

• Il y a un sélecteur faisant référence à l'élément bouton dans lequel les propriétés CSS, I.e., "poids de police","couleur" et "marge«Ont été définis.
• Dans le "Bouton: Focus«Pseudo-classe, la valeur du«couleur«La propriété est définie comme«fuchsia". Cela transformera la couleur du texte en «Fuchsia» lorsque le bouton est cliqué.
• Dans le "bouton: actif”Pseudo-classe, le«poids de police«La propriété CSS est définie comme«gras", Cela a en gras le texte du bouton sur l'instance lorsque l'utilisateur clique sur le bouton.
• Ensuite, le sélecteur de classe ajouté fait référence à l'élément div et le ««Texte-aligne: Centre"La propriété CSS a été ajoutée pour aligner le bouton créé à l'intérieur de l'élément div au centre.

Le ":se concentrer" et ":actif«Les pseudo-classes fonctionnent de la manière suivante en coordination avec les propriétés:

Il s'agissait des fonctionnalités du «:se concentrer" et ":actif»Et la différence entre eux.

Conclusion

Le ":se concentrer" et ":actif«Des pseudo-classes sont utilisées pour définir les propriétés CSS pour les éléments aux cas où un certain événement est effectué sur un élément HTML. L'effet des propriétés définies dans la pseudo-classe «: active» disparaît instantanément après l'événement comme un clic de souris mais l'effet des propriétés définies dans la pseudo-classe «: focus» reste après l'événement joué sur l'élément.