Legg til hovertekst uten JavaScript som vi svever på en brukers navn

Legg til hovertekst uten JavaScript som vi svever på en brukers navn
På mange websider ser vi ofte en tekst som vises på et bestemt element når vi svever over den og forsvinner når vi flytter markøren et annet sted på skjermen. Den teksten kalles hovertekst. I JavaScript er det enkelt å legge til hoverteksten på et element. Men det er også mulig å legge til en svevertekst i et HTML -dokument ved å bruke enten "”Element eller“”Element med tittelattributtet.

Denne artikkelen vil demonstrere to nyttige metoder for å legge til en hovertekst i HTML uten å bruke JavaScript:

  • Gjennom "Div" -element
  • Gjennom "Span" -element

Metode 1: Legg til hovertekst gjennom “Div” -elementet

En hovertekst kan legges til ved ganske enkelt å bruke "”Element med“tittel”Attributt i åpningen””. Utvikleren må legge til hoverteksten i "tittel" -attributtet i "”Åpningsmerke og HTML -elementet legges til mellom åpningen og lukkingen””Tagger. Teksten inne i “”Containerelement kan være av hvilken som helst type. For eksempel en “

”Overskrift,“

Eksempel

La oss skrive et enkelt eksempel for å legge til “”Element for å legge til hoverteksten over et HTML -element:

Hold over meg!

I henhold til koden ovenfor:

  • En "”Element er lagt til med“tittel”Attributt i åpningen”" stikkord.
  • tittel”Attributt inneholder teksten som antas å vises mens brukeren henger musemarkøren over teksten.
  • Mellom åpningen og avslutningen “”Tags er teksten som vises på grensesnittet som svever som viser hoverteksten.

Det ovennevnte eksemplet vil vise følgende utgang:

Metode 2: Legg til hovertekst gjennom “Span” -element

En hovertekst kan også legges til ved hjelp av "”Element i HTML. Alt det krever er å legge til hoverteksten i tittelattributtet og det faktiske HTML -elementet som hoverteksten legges til mellom åpningen og lukkingen “”Tagger.

Eksempel

La oss legge til et enkelt eksempel for å sette inn “”Element i HTML -dokumentet med det formål å legge til hoverteksten over et HTML -element:

Hold over meg!

I eksemplet ovenfor:

  • En "”Element er lagt til med“tittel”Attributt inne i åpningen”" stikkord.
  • tittel”Attributt inneholder teksten som antas å vises når brukeren henger over.
  • Mellom åpningen og lukking "”Tags er teksten som vises til brukeren som svever som viser hoverteksten.

Produksjon

Dette oppsummerer de mulige metodene for å legge til en hovertekst uten å bruke JavaScript.

Konklusjon

En hovertekst kan enkelt legges til i HTML uten å kreve bruk av JavaScript -funksjoner. Utvikleren må bruke enten "”Element eller“”Element som oppretter HTML -elementet og deretter legg til tittelattributtet som definerer hoverteksten. Dette innlegget er en god guide om metoden for å legge til hoverteksten uten å kreve JavaScript.