Adjon hozzá lebegtető szöveget JavaScript nélkül, ahogy mi egy felhasználónévre helyezzük az egérmutatót

Adjon Hozza Lebegteto Szoveget Javascript Nelkul Ahogy Mi Egy Felhasznalonevre Helyezzuk Az Egermutatot



Sok weboldalon gyakran megtekintünk egy olyan szöveget, amely egy bizonyos elemen jelenik meg, ha rámutatjuk az egérmutatót, és eltűnik, ha a kurzort a képernyőn máshová mozgatjuk. Ezt a szöveget lebegő szövegnek nevezik. A JavaScriptben könnyen hozzáadható a lebegő szöveg egy elemhez. De az is lehetséges, hogy egy lebegő szöveget hozzáadjon egy HTML-dokumentumhoz a „
' elem vagy a ' ” elemet a title attribútummal.

Ez a cikk két hasznos módszert mutat be a HTML-be mutató szöveg hozzáadására JavaScript használata nélkül:

1. módszer: Hover Text hozzáadása a „div” elemen keresztül

Lebegtető szöveget egyszerűen a „

' elem a ' cím ' attribútum a nyitásban ' ”. A fejlesztőnek hozzá kell adnia a lebegő szöveget a „title” attribútumhoz a „
' nyitó címkét és a HTML elemet hozzáadja a nyitó és záró '
” címkéket. A szöveg a „
” tárolóelem bármilyen típusú lehet. Például egy „

'cím, '

” bekezdés elemet, vagy egy egyszerű szöveget.





Példa

Írjunk egy egyszerű példát a „

” elemet, hogy az egérmutatót egy HTML-elem fölé helyezze:



< div cím = 'Ez a lebegő szöveg' > Lebeg felettem! < / div >

A fenti kód szerint:



  • egy '
    ' elem hozzáadásra került a ' cím ' attribútum a nyitásban '
    ” címke.
  • A ' cím ” attribútum azt a szöveget tartalmazza, amelynek meg kell jelennie, miközben a felhasználó az egérmutatót a szöveg fölé viszi.
  • A nyitás és a zárás között'
    ” címkék az a szöveg, amely azon a felületen jelenik meg, amely fölé viszi az egeret, és amelyre a mutató szöveg jelenik meg.

A fent hozzáadott példa a következő kimenetet jeleníti meg:



2. módszer: Lebegő szöveg hozzáadása a „span” elemen keresztül

Lebegtető szöveget a „ ” elemet a HTML-ben. Mindössze annyit kell tennie, hogy hozzá kell adni a hover szöveget a title attribútumhoz, és azt a tényleges HTML-elemet, amelyhez a lebegő szöveg hozzáadódik a nyitó és a záró ' ” címkéket.



Példa

Adjunk hozzá egy egyszerű példát a ' ” elemet a HTML-dokumentumban, hogy az egérmutatót egy HTML-elem fölé helyezze:

< span cím = 'Ez a lebegő szöveg' >Lebegj felettem!< / span >

A fenti példában:

  • egy ' ' elem hozzáadásra került a ' cím ' attribútum a nyíláson belül ' ” címke.
  • A ' cím ” attribútum azt a szöveget tartalmazza, amelynek meg kell jelennie, amikor a felhasználó fölé viszi az egérmutatót.
  • A nyitás és zárás között' ” címkék az a szöveg, amely megjelenik a felhasználó számára, aki fölé viszi az egérmutatót, és amelyre a mutató szöveg jelenik meg.

Kimenet

Ez összefoglalja azokat a lehetséges módszereket, amelyek segítségével hover szöveget adhat hozzá JavaScript használata nélkül.

Következtetés

A hover szöveg könnyen hozzáadható a HTML-hez JavaScript-függvények használata nélkül. A fejlesztőnek vagy a „

' elem vagy a ' ” elemet, amely létrehozza a HTML-elemet, majd adja hozzá a lebegő szöveget meghatározó title attribútumot. Ez a bejegyzés egy jó útmutató a lebegő szöveg hozzáadásának módjáról JavaScript nélkül.

Egyéb

Kategória

Népszerű Bejegyzések

Az OpenCL telepítése Intel GPU-hoz Fedora 40+ rendszeren

Az Android vágólap szinkronizálása a Windows rendszerrel

A Stable Diffusion 2.0 felfedezése – Webhely, amelyet érdemes megfontolni a Stable Diffusion 2.0 kipróbálásához

Mik azok a karakterláncok a C programozásban?

Mi az a Let’s Encrypt DNS-01 Challenge és hogyan kell használni SSL-tanúsítványok beszerzéséhez?

Alakítsa át a meredek tömböt számtömbbé JavaScriptben

A Raspberry Pi távoli leállítása

A Docker képméret csökkentése

A Math atan2() metódus használata JavaScriptben

Hogyan lehet visszaállítani egy mutatót a C++ függvényekből

Hogyan lehet letiltani vagy eltávolítani a OneDrive-ot a Windows 10/11 rendszerben?

Mi az a rövid távú tárolás az AWS Lambdában?

Dupla szóköz alkalmazása a Microsoft Wordben

C++ string::front & C++ string::back

Az Android kikapcsolja a riasztást a Ne zavarjanak módban?

A PHP rand() függvény használata

Redis SCARD

Hogyan használjuk a kompozíciót a Java nyelven példákkal?

Hogyan másoljunk tömböket a memmove() segítségével a C programozásban

Adatok lekérése a Streamlitben