Tambah Teks Tuding Tanpa JavaScript Seperti kami Tuding pada Nama Pengguna

Tambah Teks Tuding Tanpa Javascript Seperti Kami Tuding Pada Nama Pengguna



Pada banyak halaman web, kita sering melihat teks yang muncul pada elemen tertentu apabila kita menuding di atasnya dan hilang apabila kita mengalihkan kursor ke tempat lain pada skrin. Teks itu dipanggil teks hover. Dalam JavaScript, mudah untuk menambah teks tuding pada elemen. Tetapi, ia juga mungkin untuk menambah teks tuding dalam dokumen HTML dengan menggunakan sama ada '
unsur ” atau “ ” elemen dengan atribut tajuk.

Artikel ini akan menunjukkan dua kaedah berguna untuk menambah teks tuding dalam HTML tanpa menggunakan JavaScript:

Kaedah 1: Tambah Teks Tuding Melalui Elemen 'div'.

Teks tuding boleh ditambah dengan hanya menggunakan “

'elemen dengan ' tajuk ' atribut dalam pembukaan ' ”. Pembangun perlu menambah teks tuding dalam atribut 'tajuk' di dalam '
” tag pembuka dan elemen HTML ditambah antara pembukaan dan penutup “
” tag. Teks di dalam '
” elemen bekas boleh dari apa-apa jenis. Sebagai contoh, '

'tajuk,'

” elemen perenggan, atau teks biasa yang ringkas.





Contoh

Mari tulis contoh mudah untuk menambah '

” elemen untuk menambah teks tuding pada elemen HTML:



< div tajuk = 'Ini ialah teks tuding' > Tuding Di Atas Saya! < / div >

Mengikut kod di atas:



  • A '
    elemen ' telah ditambah dengan ' tajuk ' atribut dalam pembukaan '
    ” tag.
  • ' tajuk ” atribut mengandungi teks yang sepatutnya dipaparkan semasa pengguna mengarahkan kursor tetikus ke atas teks.
  • Antara pembukaan dan penutup '
    ” tags ialah teks yang akan dipaparkan pada antara muka yang berlegar yang akan memaparkan teks tuding.

Contoh yang ditambahkan di atas akan memaparkan output berikut:



Kaedah 2: Tambah Teks Tuding Melalui Elemen 'span'.

Teks tuding juga boleh ditambah menggunakan ' ” elemen dalam HTML. Apa yang diperlukan ialah menambah teks tuding dalam atribut tajuk dan elemen HTML sebenar yang mana teks tuding ditambah antara pembukaan dan penutup “ ” tag.



Contoh

Mari tambah contoh mudah untuk memasukkan ' ” elemen dalam dokumen HTML untuk tujuan menambah teks tuding pada elemen HTML:

< rentang tajuk = 'Ini ialah teks tuding' >Tuding Atas Saya!< / rentang >

Dalam contoh di atas:

  • A ' elemen ' telah ditambah dengan ' tajuk ' atribut di dalam pembukaan ' ” tag.
  • ' tajuk ” atribut mengandungi teks yang sepatutnya dipaparkan apabila pengguna menuding ke atas.
  • Antara pembukaan dan penutupan ' ” tags ialah teks yang akan dipaparkan kepada pengguna yang melayang di atas yang akan memaparkan teks tuding.

Pengeluaran

Ini merumuskan kaedah yang mungkin untuk menambah teks tuding tanpa menggunakan JavaScript.

Kesimpulan

Teks tuding boleh ditambah dengan mudah dalam HTML tanpa memerlukan penggunaan fungsi JavaScript. Pembangun perlu menggunakan sama ada '

unsur ” atau “ ” elemen yang mencipta elemen HTML dan kemudian menambah atribut tajuk yang mentakrifkan teks tuding. Siaran ini adalah panduan yang baik tentang kaedah untuk menambah teks tuding tanpa memerlukan JavaScript.

Lain-lain

Kategori

Jawatan Popular

Fungsi Power BI SWITCH (DAX): Sintaks, Penggunaan dan Contoh

Bolehkah Arduino Digunakan Sebagai PLC

Cara Mengkonfigurasi Laluan Templat dalam CSS Tailwind

Bagaimana untuk Menggunakan Tag Alamat HTML?

Akses Raspberry Pi Di Belakang Firewall Dari Jauh Melalui JFrog Connect

Cara Menstrim Nintendo Switch ke Discord

Cara Menggunakan Fungsi PHP date_sunrise() dan date_sunset().

Cara Memasang NumPy pada Raspberry Pi

Oracle ALTER SEQUENCE Mengikut Contoh Praktikal

Apakah itu Pengurusan Sesi Roblox

Cara Menggunakan Fungsi Math.Round() dalam C#

Cara Memasang qTox Messenger pada Raspberry Pi

Bagaimana untuk Memperuntukkan Memori CUDA dengan Pembolehubah 'pytorch_cuda_alloc_conf'?

Bagaimanakah saya boleh Menggabungkan Cawangan Git ke dalam Master dengan Selamat?

Cara Membuat Akaun Pengguna Hab Jupyter Baharu

Cara Memasang Rust pada Debian 12 Bookworm

Bagaimana untuk menamakan semula Pentadbir dan Akaun Tetamu dalam Pelayan Windows

Cara Memasang Visual Studio IDE pada Windows 10/11

Kumpulan Postgresql oleh

Bagaimanakah Kaedah 'Pemadaman Rawak' Berfungsi Dalam PyTorch?