Comment créer un texte de spoiler - HTML

Un texte de spoiler signifie le texte caché et peut être visualisé lorsque l'utilisateur choisit de le visualiser en effectuant une activité. Par exemple, lorsque l'utilisateur plane sur le texte. Le texte de spoiler peut être créé facilement en HTML via la balise Span.

Discutons en détail de la fonctionnalité du texte du spoiler.

Création de textes de spoiler dans HTML

Il devrait y avoir un élément HTML pour créer le texte puis un élément de style CSS pour définir les activités et propriétés de spoiler pour l'élément contenant le texte. Différentes classes pseudo comme «:actif",":Cliquez sur" et ":flotter«Peut être défini comme l'activité de spoiler dans l'élément de style. Par exemple, l'ajout de «:flotter»Pseudo Class fonctionnera de telle manière que lorsque l'utilisateur oscille le curseur de la souris sur le texte, il affichera le texte.

Exemple: création de textes de spoiler avec différentes couleurs

Créons trois textes de spoiler différents via trois balises de portée différentes dans HTML:

Planer pour voir le texte

class = "spoiler1"> texte 1


class = "spoiler2"> texte 2


class = "spoiler3"> texte 3

Dans l'extrait de code HTML ci-dessus:

• • UN "

    "Une rubrique est ajoutée qui dit"Planer pour voir le texte".

  • Il ya trois "portée»Tags chacun avec une différence de ligne.
  • Les noms de classe déclarés «spoiler1","spoiler2" et "spoiler3"Avec le texte"texte 1", Texte 2" et "Texte 3", respectivement.

Dans l'élément de style CSS, ajoutez les sélecteurs de classe pour ajouter des propriétés à chaque élément HTML:

.spoiler1, .spoiler2, .spoiler3
la couleur noire;
Color en arrière-plan: noir;

.spoiler1: Hover
Couleur blanche;

.spoiler2: Hover
Color d'arrière-plan: blanc;

.spoiler3: Hover
Color d'arrière-plan: jaune;

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

• • Trois sélecteurs de classe ont été ajoutés pour définir les propriétés des trois éléments associés aux classes "spoiler1","spoiler2" et "spoiler3".
  • Après cela, le sélecteur de classe pour la classe "spoiler1"A été ajouté séparément pour définir la couleur du texte de l'élément.
  • De même, il y a le sélecteur de classe pour la classe "spoiler2"Pour définir la couleur d'arrière-plan de l'élément associé à cette classe"blanc".
  • Enfin, il y a une propriété définie pour le «spoiler3"Classe pour définir la couleur d'arrière-plan du texte"jaune".

Cela créera trois textes cachés différents dans la sortie et l'utilisateur peut les visualiser en les survolant comme suit:

C'est ainsi que vous pouvez créer un texte de spoiler dans HTML.

Conclusion

Le texte de spoiler peut facilement être créé via les balises de portée en html. Le développeur n'a qu'à se référer à l'ID ou à la classe de la balise SPAN dans l'élément de style CSS avec la classe pseudo qui définit l'activité à effectuer pour afficher le texte caché comme cliquer ou survoler les éléments. Ce message a guidé la méthode de création d'un texte de spoiler dans HTML.