Saya tidak akan mengatakan banyak omong kosong, saya hanya akan memposting kode kepada Anda. Kode spesifiknya adalah sebagai berikut:
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Title> Delay Display Prompt Box </iteme> <tyle>#Div1 {float: kiri; lebar: 60px; tinggi: 60px; latar belakang: aqua;}#Div2 {posisi: relatif: 60px; latar belakang: aqua;}#div2 {posisi: relatif; relatif: 60px; latar belakang: aqua;}#div2 {posisi: relative; relative; 200px; latar belakang-warna: #cccccc; display: none;} </style> <script> window.onload = function () {var odiv1 = document.geteLementById ('div1'); var odiv2 = document.geteLementById ('div2'); var timer = null; // odiv1.onmouseRed () () () () {nullime) {null; // odiv1.onmouseRer = () () () {nullime = null;//odiv1.onmouseRoVer = () () {null; odiv2.style.display = 'block'; // Div2 // Ketika mouse bergerak ke div1}; //// odiv1.onmouseout = function () {// timer = setTimeout (function () {// odiv2.style.display = 'tidak ada'; // Sembunyikan div2 //}, 500); // Untuk pindah dari Div1 ke Div2, ketika div1 dipindahkan dari Div1, harus ada pengaturan penundaan ketika Div2 disembunyikan //}; //// odiv2.onmouseover = function () {// cleartimeout (timer); // Bersihkan pengaturan penundaan, ketika mouse bergerak ke div2, div2 harus ditampilkan //}; //// odiv2.onmouseout = function () {// timer = setTimeout (function () {// odiv2.style.display = 'none'; // Ketika mouse keluar dari Div2, Div2 harus disembunyikan/tidak ada '; // Ketika mouse keluar dari Div2 dan ke Div1, Div2 akan berkedip dan ditampilkan lagi, mengatur penundaan untuk menghapus efek berkedip; // // Namun, setelah menetapkan keterlambatan dan memindahkan mouse ke Div1, Div2 disembunyikan karena setTimeout, // // penundaan harus dihapus, dan kode untuk penundaan ditambahkan dalam acara ODIV1.onmouseover untuk menghapus penundaan. //}; // Karena kode dalam empat peristiwa ini sama atau serupa, pemrosesan yang disederhanakan berikut dapat dilakukan: odiv1.onmouseover = odiv2.onmouseover = function () {ClearTimeout (timer); odiv2.style.display = 'blok';/* Ketika mouse dipindahkan ke Div1, div2 ditampilkan. Meskipun odiv2.onmouseover tidak ditulis dalam odiv2.style.display = 'block'; Tetapi pada kenyataannya ODIV2 dalam keadaan 'blok', menulis satu kode lagi tidak memiliki dampak substansial*/}; odiv1.onmouseout = odiv2.onmouseout = function () {timer = setTimeout (function () {odiv2.style.display = 'none';/hide Div2 ketika mouse dihapus dari div1}, 500); // Untuk pindah dari Div1 ke Div2, harus ada pengaturan penundaan ketika DIV1 dipindahkan dari Div1}; // Hasil eksekusi kode yang disederhanakan persis sama dengan efek kode sebelumnya.} </script> </head> <hod> <h2> Kotak prompt </h2> <v ID = "Div1"> </Div> <h2> Kotak </h2> <v ID = "Div1"> </Div> Div ID = "Poin -poin yang perlu diperhatikan saat menulis kotak Delay Prompt dicatat dalam komentar. Harap perhatikan satu per satu. Fungsi ini lebih halus setelah membaca tutorial video. Alasannya adalah bahwa sebelum menulis kode, daftar fungsi yang diperlukan diimplementasikan satu per satu. Jika ada masalah, jauh lebih baik untuk melakukan penyesuaian yang sesuai daripada menulis kode secara langsung.