Come creare un testo spoiler - html

Un testo di spoiler indica il testo nascosto e può essere visualizzato quando l'utente sceglie di visualizzarlo eseguendo un'attività. Ad esempio, quando l'utente si libra sul testo. Il testo dello spoiler può essere creato in HTML tramite facilmente il tag di span.

Discutiamo in dettaglio la funzionalità del testo dello spoiler.

Creazione di testi spoiler in HTML

Dovrebbe esserci un elemento HTML per creare il testo e quindi un elemento in stile CSS per definire le attività e le proprietà dello spoiler per l'elemento contenente il testo. Diverse classi di pseudo come ":attivo",":clic" E ": Hover"Può essere definito come l'attività dello spoiler nell'elemento di stile. Ad esempio, aggiungendo il ": Hover"La classe pseudo funzionerà in modo tale che quando l'utente litiga il cursore del mouse sul testo visualizzerà il testo.

Esempio: creazione di testi spoiler con colori diversi

Creiamo tre diversi testi di spoiler attraverso tre diversi tag di span in HTML:

Passa il mouse per vedere il testo

class = "spoiler1"> testo 1


class = "spoiler2"> testo 2


class = "spoiler3"> testo 3

Nel suddetto snippet del codice HTML:

• • UN "

    "Viene aggiunto l'intestazione che dice"Passa il mouse per vedere il testo".

  • Ce ne sono tre "arco"Tag ciascuno con una differenza di riga.
  • I nomi delle classi dichiarati come "spoiler1","spoiler2" E "spoiler3"Con il testo"Testo 1", Testo 2" E "Testo 3"Rispettivamente.

Nell'elemento stile CSS, aggiungi i selettori di classe per aggiungere proprietà a ciascun elemento HTML:

.spoiler1, .spoiler2, .spoiler3
colore nero;
Background-color: nero;

.spoiler1: hover
colore bianco;

.spoiler2: hover
Background-color: bianco;

.spoiler3: hover
Background-color: giallo;

Nell'elemento in stile CSS sopra:

• • Sono stati aggiunti tre selettori di classe per definire le proprietà per tutti e tre gli elementi associati alle classi "spoiler1","spoiler2" E "spoiler3".
  • Successivamente, il selettore di classe per la classe "spoiler1"È stato aggiunto separatamente per definire il colore del testo per l'elemento.
  • Allo stesso modo, c'è il selettore di classe per la classe "spoiler2"Per definire il colore di sfondo dell'elemento associato a questa classe"bianco".
  • Infine, esiste una proprietà definita per "spoiler3"Classe per impostare il colore di sfondo del testo"giallo".

Ciò creerà tre diversi testi nascosti nell'output e l'utente può visualizzarli in bilcarli come segue:

È così che puoi creare un testo di spoiler in HTML.

Conclusione

Il testo dello spoiler può essere facilmente creato tramite i tag di span in HTML. Lo sviluppatore deve solo fare riferimento all'ID o alla classe del tag SPAN nell'elemento in stile CSS con la classe pseudo che definisce l'attività da eseguire per visualizzare il testo nascosto come fare clic o molare sugli elementi. Questo post ha guidato il metodo per la creazione di un testo di spoiler in HTML.