Hvordan lage en spoilertekst - HTML

En spoilertekst betyr teksten som er skjult og kan sees når brukeren velger å se den ved å utføre en aktivitet. For eksempel når brukeren henger over teksten. Spoilerteksten kan enkelt opprettes i HTML gjennom spennkoden.

La oss diskutere funksjonaliteten til spoilerteksten i detalj.

Opprette spoilertekster i HTML

Det skal være et HTML -element for å lage teksten og deretter et CSS -stilelement for å definere spoileraktivitetene og egenskapene for elementet som inneholder teksten. Forskjellige pseudoklasser som ":aktiv”,“: Klikk”Og“:sveve”Kan defineres som spoileraktiviteten i stilelementet. For eksempel å legge til ":sveve”Pseudoklasse vil fungere på en slik måte at når brukeren henger musemarkøren over teksten, vil den vise teksten.

Eksempel: Å lage spoilertekster med forskjellige farger

La oss lage tre forskjellige spoilertekster gjennom tre forskjellige spennkoder i HTML:

Hold over for å se teksten

class = "spoiler1"> tekst 1


class = "spoiler2"> tekst 2


class = "spoiler3"> tekst 3

I ovennevnte HTML -kodeutdrag:

• • En "

    ”Det er lagt til overskrift som sier“Hold over for å se teksten”.

  • Det er tre "spenn”Tagger hver med en linjeforskjell.
  • Klassenavnene erklært som “Spoiler1”,“Spoiler2”Og“Spoiler3”Med teksten”Tekst 1”, Tekst 2”Og“Tekst 3”, Henholdsvis.

I CSS -stilelementet, legg til klasseselgerne for å legge til egenskaper til hvert HTML -element:

.Spoiler1, .Spoiler2, .spoiler3
farge svart;
bakgrunnsfarge: svart;

.Spoiler1: Hopp
Farge: Hvit;

.Spoiler2: Hopp
Bakgrunnsfarge: Hvit;

.Spoiler3: Hopp
bakgrunnsfarge: gul;

I ovennevnte CSS -stilelement:

• • Tre klasseselgere er lagt til for å definere egenskapene for alle tre elementene tilknyttet klassene "Spoiler1”,“Spoiler2”Og“Spoiler3”.
  • Etter det er klasselytteren for klassen "Spoiler1”Har blitt lagt til for å definere tekstfargen for elementet.
  • Tilsvarende er det klassevelgeren for klassen "Spoiler2”For å definere bakgrunnsfargen på elementet tilknyttet denne klassen”hvit”.
  • Til slutt er det en eiendom definert for "Spoiler3”Klasse for å sette bakgrunnsfargen på teksten”gul”.

Dette vil lage tre forskjellige skjulte tekster i utdataene, og brukeren kan se dem ved å sveve over dem som følger:

Slik kan du lage en spoilertekst i HTML.

Konklusjon

Spoilerteksten kan enkelt opprettes gjennom spennetikettene i HTML. Utvikleren må bare henvise til ID eller klassen til spenn -taggen i CSS -stilelementet med pseudoklassen som definerer aktiviteten som skal utføres for å vise den skjulte teksten som å klikke eller sveve over elementene. Dette innlegget ledet om metoden for å lage en spoilertekst i HTML.