Verwenden Sie einfaches JQuery-CSS, um eine benutzerdefinierte Tag-Titel-Eingabeaufforderung, Tooltip_HTML/Xhtml_web-Seitenproduktion zu erstellen

Einführung

Verwenden Sie einfaches JQuery-CSS, um eine benutzerdefinierte Tag-Titel-Eingabeaufforderung zu erstellen, um das Standardverhalten des Browsers zu ersetzen. Wie im Bild gezeigt:



Javascript-Code

Code kopieren

Code Wie folgt:

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

Vergessen Sie nicht, JQuery zu zitieren.

Die setTimeout(function () { pop.remove(); }, pop.text().length*80); im Code berechnet die Aufforderungszeit basierend auf der Titellänge, um zu kurze Titelaufforderungen zu verhindern . Eine lange oder zu lange Titelaufforderung ist zu kurz.

CSS-Code

Code kopierenDer Code lautet wie folgt:

# Anchortitlecontainer {
Z-Index: 5999;
Rahmen: 1px #315B6C;
Hintergrund : keine, wiederholen Sie den Bildlauf 0 0 #FFFFFF;
display: none;
#anchortitlecontainer:before {
bottom: auto ;
links: -15px;
Rahmenfarbe: transparent #315B6C;
Rahmenbreite: 15px; Inhalt: „“;
Anzeige: Block;
} 0px;
top: -13px;
border-style: solid;
content: "" 🎜> display: block;
width: 0;
}


Verwenden Sie einige CSS3-Funktionen und vermeiden Sie die Verwendung von Bildern.

Ich bin kein CSS-Experte, daher hat es einige Zeit gedauert, diesen Stil anzupassen. Wenn jemand ihn verwenden kann, wäre es mir eine Ehre. :) :)