Jak utworzyć tekst spoilera - HTML

Tekst spoilera oznacza ukryty tekst i można go obejrzeć, gdy użytkownik zdecyduje się go wyświetlić, wykonując aktywność. Na przykład, gdy użytkownik unosi się nad tekstem. Tekst spoilera można łatwo utworzyć w HTML za pomocą znacznika Span.

Omówmy szczegółowo funkcjonalność tekstu spoilera.

Tworzenie tekstów spoilera w HTML

Powinien istnieć element HTML do utworzenia tekstu, a następnie element stylu CSS, aby zdefiniować działania spoilera i właściwości elementu zawierającego tekst. Różne pseudo zajęcia, takie jak „:aktywny”,„:Kliknij" I ":unosić się”Można zdefiniować jako aktywność spoilera w elemencie stylu. Na przykład dodanie „:unosić się„Pseudo klasa będzie działać w taki sposób, że gdy użytkownik unosi kursor myszy na tekst, wyświetli tekst.

Przykład: Tworzenie tekstów spoilera o różnych kolorach

Utwórzmy trzy różne teksty spoilera poprzez trzy różne tagi rozpiętości w HTML:

Unosić się, aby zobaczyć tekst

class = "spiler1"> tekst 1


class = "spiler2"> tekst 2


class = "spiler3"> tekst 3

W powyższym fragmencie kodu HTML:

• • A "

    ”Dodano nagłówek, który mówi„Unosić się, aby zobaczyć tekst".

  • Są trzy "Zakres”Tagi każdy z jedną różnicą linii.
  • Nazwy klas zadeklarowane jako „Spoiler1”,„Spoiler2" I "Spoiler3”Z tekstem„Tekst 1", tekst 2" I "tekst 3”Odpowiednio.

W elemencie stylu CSS dodaj selektory klas, aby dodać właściwości do każdego elementu HTML:

.Spoiler1, .Spoiler2, .Spoiler3
czarny kolor;
kolor tła: czarny;

.Spoiler1: Hover
kolor biały;

.Spoiler2: Hover
kolor tła: biały;

.Spoiler3: Hover
kolor tła: żółty;

W powyższym elemencie stylu CSS:

• • Dodano trzech selektorów klas w celu zdefiniowania właściwości dla wszystkich trzech elementów związanych z klasami „Spoiler1”,„Spoiler2" I "Spoiler3".
  • Następnie selektor klasowy dla klasy „Spoiler1”Został dodany osobno, aby zdefiniować kolor tekstu dla elementu.
  • Podobnie istnieje selektor klasy dla klasy „Spoiler2„Aby zdefiniować kolor tła elementu powiązanego z tą klasą”biały".
  • Na koniec istnieje właściwość zdefiniowana dla „Spoiler3„Klasa, aby ustawić kolor tła tekstu„żółty".

To stworzy trzy różne ukryte teksty w wyjściu, a użytkownik może je wyświetlić, unosząc się nad nimi w następujący sposób:

W ten sposób możesz stworzyć tekst spoilera w HTML.

Wniosek

Tekst spoilera można łatwo utworzyć za pomocą znaczników Span w HTML. Deweloper musi po prostu odnosić się do identyfikatora lub klasy znacznika Span w elemencie stylu CSS z pseudo, która określa aktywność do wykonania w celu wyświetlania ukrytego tekstu, takiego jak kliknięcie lub unoszenie się nad elementami. Ten post prowadził do metody tworzenia tekstu spoilera w HTML.