So erstellen Sie einen Spoilertext - HTML

Ein Spoilertext bezeichnet den verborgenen Text und kann angezeigt werden, wenn der Benutzer ihn ansieht, indem sie eine Aktivität ausführt. Zum Beispiel, wenn der Benutzer über den Text schwebt. Der Spoilertext kann in HTML leicht durch das Span -Tag erstellt werden.

Lassen Sie uns die Funktionalität des Spoiler -Textes im Detail diskutieren.

Erstellen von Spoiler -Texten in HTML

Es sollte ein HTML -Element geben, um den Text und dann ein CSS -Stilelement zu erstellen, um die Spoileraktivitäten und Eigenschaften für das Element, das den Text enthält, zu definieren. Verschiedene Pseudoklassen mögen “:aktiv",":klicken" Und ":schwebenKann als Spoileraktivität im Stilelement definiert werden. Zum Beispiel das Hinzufügen der “:schwebenDie Pseudo -Klasse funktioniert so, dass der Benutzer, wenn der Benutzer den Mauszeiger über dem Text hebt, den Text angezeigt wird.

Beispiel: Erstellen von Spoiler -Texten mit verschiedenen Farben

Erstellen wir drei verschiedene Spoiler -Texte durch drei verschiedene Span -Tags in HTML:

Schweben Sie um den Text zu sehen

class = "spoiler1"> text 1


class = "spoiler2"> text 2


class = "spoiler3"> text 3

Im obigen HTML -Code -Snippet:

• • A "

    "Überschrift wird hinzugefügt, die heißt"Schweben Sie um den Text zu sehen”.

  • Dort sind drei "Spanne”Tags mit jeweils einen Zeilenunterschied.
  • Die Klassennamen als "als" deklariert "Spoiler1","Spoiler2" Und "Spoiler3"Mit dem Text"Text 1”, Text 2" Und "Text 3", bzw.

Fügen Sie im CSS -Stilelement die Klassenauswahl hinzu, um jedem HTML -Element Eigenschaften hinzuzufügen:

.Spoiler1, .Spoiler2, .Spoiler3
Farbe: Schwarz;
Hintergrundfarbe: Schwarz;

.Spoiler1: Hover
Farbe weiß;

.Spoiler2: Hover
Hintergrundfarbe: weiß;

.Spoiler3: Hover
Hintergrundfarbe: Gelb;

Im obigen CSS -Stilelement:

• • Es wurden drei Klassenauswahlern hinzugefügt, um die Eigenschaften für alle drei mit den Klassen verbundenen Elemente zu definierenSpoiler1","Spoiler2" Und "Spoiler3”.
  • Danach der Klassenauswahl für die Klasse “Spoiler1Wurde getrennt hinzugefügt, um die Textfarbe für das Element zu definieren.
  • In ähnlicher Weise gibt es den Klassenauswahl für die Klasse “Spoiler2"Um die Hintergrundfarbe des mit dieser Klasse verbundenen Elements zu definieren"Weiss”.
  • Schließlich gibt es eine Eigenschaft für die “definiert“Spoiler3"Klasse, um die Hintergrundfarbe des Textes festzulegen"Gelb”.

Dadurch werden drei verschiedene versteckte Texte in der Ausgabe erstellt, und der Benutzer kann sie anzeigen, indem sie wie folgt über sie schweben:

So können Sie einen Spoiler -Text in HTML erstellen.

Abschluss

Der Spoilertext kann leicht über die Span -Tags in HTML erstellt werden. Der Entwickler muss sich nur auf die ID oder Klasse des Span -Tags im CSS -Stilelement beziehen. Dieser Beitrag leitete die Methode zum Erstellen eines Spoilertextes in HTML.