Bagaimana untuk melaksanakan fungsi hover JavaScript dalam HTML

Fungsi hover JavaScript bermaksud bahawa apabila penuding tetikus melayang di atas elemen, anda boleh melakukan operasi tertentu, seperti memaparkan maklumat segera, menukar gaya elemen, dsb. Ciri ini sangat biasa dalam reka bentuk web dan boleh memberikan pengguna pengalaman interaktif yang lebih baik. Untuk melaksanakan fungsi tuding JavaScript dalam HTML, anda boleh mengikuti langkah di bawah.

Langkah 1: Tulis kod HTML

Mula-mula, anda perlu menulis kod HTML asas, termasuk elemen yang perlu melaksanakan fungsi hover. Sebagai contoh, kita boleh mencipta elemen div mudah seperti ini:

<div id="myDiv">这是一个 div 元素</div>

Langkah 2: Tambah kod JavaScript

Seterusnya, anda perlu menambah kod JavaScript untuk melaksanakan fungsi tuding. Anda boleh meletakkan kod JavaScript dalam elemen kepala fail HTML, atau anda boleh meletakkannya dalam fail .js luaran dan kemudian merujuknya. Sebagai contoh, berikut ialah kod JavaScript mudah:

const myDiv = document.getElementById("myDiv");
myDiv.addEventListener("mouseover", function() {
  myDiv.style.backgroundColor = "red";
});

myDiv.addEventListener("mouseout", function() {
  myDiv.style.backgroundColor = "white";
});

Kod ini mula-mula mendapatkan elemen dengan id "myDiv" melalui kaedah document.getElementById("myDiv"). Kemudian, tambahkan dua pendengar acara pada elemen melalui kaedah addEventListener(). Pendengar pertama ialah mouseover, yang mewakili acara yang dicetuskan apabila penuding tetikus melayang di atas elemen. Apabila peristiwa dicetuskan, kita boleh menetapkan warna latar belakang elemen kepada merah melalui kaedah style.backgroundColor. Pendengar kedua ialah mouseout, yang mewakili peristiwa yang dicetuskan apabila penunjuk tetikus meninggalkan elemen. Apabila acara berlaku, kami boleh menetapkan semula warna latar belakang kepada putih.

Kesan kod ini ialah apabila penunjuk tetikus melayang di atas elemen div, warna latar belakangnya menjadi merah dan apabila penunjuk tetikus keluar, warna latar belakang kembali kepada putih.

Langkah 3: Panggil kod JavaScript

Akhir sekali, anda perlu menyambungkan kod JavaScript ke halaman HTML untuk fungsi tuding berkuat kuasa. Kod JavaScript boleh dipanggil dengan:

• Letak kod JavaScript terus dalam
• Simpan kod JavaScript dalam fail .js luaran dan kemudian rujuk fail dalam halaman HTML. Contohnya: <script src="myscript.js"></script>

Antara dua kaedah di atas, kaedah kedua adalah lebih baik kerana kod JavaScript boleh diuruskan secara berasingan dan kod halaman HTML boleh dielakkan daripada terlalu mengelirukan.

Ringkasan

Fungsi tuding JavaScript boleh menambah lebih banyak pengalaman interaktif pada halaman web, menjadikannya lebih mudah untuk pengguna berinteraksi dengan halaman tersebut. Untuk melaksanakan fungsi hover JavaScript, anda perlu menulis kod HTML terlebih dahulu, kemudian menambah kod JavaScript, dan akhirnya menyambung kedua-duanya. Di atas adalah contoh pelaksanaan yang mudah, yang perlu diubah suai dan diselaraskan mengikut keperluan dalam aplikasi sebenar.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi hover JavaScript dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!