JS melaksanakan kesan memaparkan kad data apabila tetikus melepasi avatar rakan dalam kemahiran senarai rakan_javascript

Berdasarkan keperluan projek, adalah perlu untuk mencipta kesan halaman berikut: apabila tetikus pengguna melepasi avatar rakan dalam senarai rakan, maklumat asas rakan dipaparkan, yang sebenarnya merupakan fungsi yang serupa kepada pelanggan QQ.

Saya menemui banyak kod di Internet, dan mereka pada dasarnya menyedari bahawa div akan muncul selepas tetikus dilegar, dan ia akan hilang serta-merta selepas meninggalkannya. Terdapat juga beberapa kod CSS tulen yang mencapai kesan ini, tetapi ia tidak berguna kepada saya Apa yang saya perlukan adalah JS (kerana data saya perlu diperolehi melalui Ajax), dan ia tidak boleh disembunyikan serta-merta selepas tetikus pergi pada div ini. Kesan halaman ini mengambil masa sehari suntuk, yang menunjukkan bahawa kemahiran JS dan CSS saya perlu dipertingkatkan...

Setelah sekian lama mencari, akhirnya saya temui dua idea yang boleh dilaksanakan seperti berikut. Ia tidak ditulis oleh saya dan saya ingin berkongsi di sini, Alamat demo. Kaedah saya merujuk kepada idea kaedah B.

Kaedah A:

Letakkan div terapung dan elemen pencetus a dalam elemen induk yang sama, dan cetuskan paparan apabila tetikus melepasi elemen induk. Dengan cara ini, apabila tetikus bergerak ke div, ia masih berada dalam elemen induk, dan div tidak akan disembunyikan.

Kaedah B:

Apabila tetikus melepasi a, div muncul Apabila tetikus meninggalkan a, tetapkan pemasa untuk menutup div Jika tetikus bergerak ke div, pemasa dikosongkan.
————————————————————————————————————————————————— —————————————————————

Kaedah saya adalah berdasarkan idea kaedah B di atas Apabila pengguna meninggalkan imej yang mencetuskan peristiwa, div kad data akan ditutup selepas kelewatan selama 3 saat operasi yang sepadan Apabila pengguna mengklik pada yang lain Apabila imej rakan dipaparkan, kaedah tersembunyi akan dipanggil serta-merta untuk menutup div yang dibuka dan pemasaan sebelumnya.

Kod JS kaedah saya diberikan di bawah:

//显示资料卡 
var beforeId; //定义全局变量 
function showInfoCard(thisObj,id){ 
this.hidden(beforeId); //立刻隐藏前一个选中弹出来的div 
beforeId = id; 
// alert(id); 
// var d = $(thisObj); 
// var pos = d.offset(); 
// var t = pos.top + d.height() - 5; // 弹出框的上边位置 
// var l = pos.left - d.width() - 600; // 弹出框的左边位置 
// $("#"+id).css({ "top": t, "left": l }).show(); 
// 

var objDiv = $("#"+id); 

$(objDiv).css("display","block"); 

$(objDiv).css("left", event.clientX-280); //弹出框的位置X值 

$(objDiv).css("top", event.clientY-10); //弹出框位置Y值 
} 
function hideInfoCard(id){ //隐藏div 
//延时3秒 
setTimeout('hidden('+id+')',3000); 
} 

function hidden(id){ 
$("#"+id).hide(); 
}

Berikut ialah coretan kod div tersembunyi dalam HTML:

<div id="id" style="display:none; width:250px; height:150px; background-color:#D1EEEE;position:absolute;"></div>

Dalam HTML, anda perlu memanggil kaedah showInfoCard dan hideInfoCard dan menggunakan pernyataan berikut untuk mendengar peristiwa tetikus:

onmouseover="showInfoCard(this,'${friend.friendId}')" onmouseout="hideInfoCard('${friend.friendId}')" 

Ini adalah coretan kod dinamik apabila menggunakannya, anda perlu memperkenalkan rangka kerja jquery.js, ia juga boleh diubah suai menjadi JS tulen. Di atas selesai, AJAX memperoleh maklumat, dan kemudian menggunakan JS untuk memasukkan kod HTML dalam div di atas untuk melengkapkan paparan Akhir sekali, berikut ialah pemaparan awal, yang agak jelek...