Gunakan CSS jquery mudah untuk mencipta tersuai tajuk teg tooltip_HTML/Xhtml_pengeluaran halaman web

Pengenalan

Gunakan CSS jquery mudah untuk mencipta gesaan tajuk teg tersuai untuk menggantikan gelagat lalai penyemak imbas. Seperti yang ditunjukkan dalam gambar:



Kod Javascript

Salin kod

kod Seperti berikut:

$(function() { 
$("a[title ]"). each(function() { 
var a = $(this); 
var title = a.attr('title'); 
if (title == undefined || title == "") return ; 
a.data('title', title) 
.removeAttr('title') 
.hover( 
function () { 
var offset = a.offset (); 
$("
").appendTo($("body")).html(title).css({ atas: offset.top a.outerHeight( ) 10, kiri: offset.left a.outerWidth() 1 }).fadeIn(function () { 
var pop = $(this); 
setTimeout(function () { pop.remove (); } , pop.text().length*80); ); 
}); 
}); 


Jangan lupa petik JQuery. 

SetTimeout(function () { pop.remove(); }, pop.text().length*80); dalam kod mengira masa gesaan berdasarkan panjang tajuk untuk mengelakkan gesaan tajuk terlalu pendek . Gesaan tajuk yang panjang atau terlalu panjang adalah terlalu pendek. 

Kod CSS





Salin kod

Kod tersebut adalah seperti berikut: # anchortitlecontainer {

kedudukan: mutlak;

z-index: 5999;

border: solid 1px #315B6C; : tiada tatal ulang 0 0 #FFFFFF;
jejari sempadan: 5px;
paparan:
}
#anchortitlecontainer:sebelum {
kedudukan: mutlak; ;
kiri: -1px;
atas: -15px; kandungan: "";
paparan: blok;
lebar: 0; 0px;
atas: -13px;
warna sempadan: lut sinar #FFFFFF; 🎜> paparan: blok;
lebar: 0;
}


Gunakan beberapa ciri CSS3 dan elakkan menggunakan imej.

Saya bukan pakar CSS, jadi saya mengambil sedikit masa untuk melaraskan gaya ini Jika seseorang boleh menggunakannya, itu adalah penghormatan saya. :)