Como criar um texto de spoiler - html

Um texto de spoiler significa o texto oculto e pode ser visto quando o usuário escolhe visualizá -lo, realizando uma atividade. Por exemplo, quando o usuário paira sobre o texto. O texto do spoiler pode ser criado em HTML através da tag de extensão facilmente.

Vamos discutir a funcionalidade do texto do spoiler em detalhes.

Criando textos de spoiler em html

Deve haver um elemento HTML para criar o texto e, em seguida, um elemento de estilo CSS para definir as atividades e propriedades do spoiler para o elemento que contém o texto. Diferentes pseudo -classes como “:ativo",":clique" e ":flutuar”Pode ser definido como a atividade do spoiler no elemento de estilo. Por exemplo, adicionando o “:flutuar”Pseudo -classe funcionará de tal maneira que, quando o usuário paira o cursor do mouse sobre o texto, ele exibirá o texto.

Exemplo: Criando textos de spoiler com cores diferentes

Vamos criar três textos de spoiler diferentes através de três tags de extensão diferentes em HTML:

Passe o mouse para ver o texto

class = "Spoiler1"> Texto 1


class = "spoiler2"> texto 2


class = "spoiler3"> texto 3

No trecho de código HTML acima:

• • A "

    ”É adicionado um título que diz“Passe o mouse para ver o texto”.

  • Há três "período”Tags cada uma com uma diferença de linha.
  • Os nomes de classe declarados como “Spoiler1","Spoiler2" e "Spoiler3"Com o texto"texto 1”, texto 2" e "texto 3”, Respectivamente.

No elemento de estilo CSS, adicione os seletores de classe para adicionar propriedades a cada elemento HTML:

.Spoiler1, .Spoiler2, .Spoiler3
cor preta;
Background-Color: Black;

.Spoiler1: Hover
cor branca;

.Spoiler2: Hover
cor de fundo: branco;

.Spoiler3: Hover
cor de fundo: amarelo;

No elemento de estilo CSS acima:

• • Três seletores de classe foram adicionados para definir as propriedades para todos os três elementos associados às classes “Spoiler1","Spoiler2" e "Spoiler3”.
  • Depois disso, o seletor de classe para a classe “Spoiler1”Foi adicionado separadamente para definir a cor do texto para o elemento.
  • Da mesma forma, existe o seletor de classe para a classe “Spoiler2”Para definir a cor de fundo do elemento associado a esta classe“branco”.
  • Por fim, há uma propriedade definida para o “Spoiler3”Classe para definir a cor de fundo do texto“amarelo”.

Isso criará três textos ocultos diferentes na saída e o usuário pode vê -los pairando sobre eles da seguinte maneira:

É assim que você pode criar um texto de spoiler em html.

Conclusão

O texto do spoiler pode ser facilmente criado através das tags de extensão em HTML. O desenvolvedor só precisa se referir ao ID ou classe da tag span no elemento de estilo CSS com a classe pseudo que define a atividade a ser realizada para exibir o texto oculto, como clicar ou pairar sobre os elementos. Este post foi guiado sobre o método para criar um texto de spoiler em html.