シンプルな jquery CSS を使用してカスタムのタグ タイトル プロンプト ツールチップを作成する_HTML/Xhtml_Web ページの制作

はじめに

単純な jquery CSS を使用して、ブラウザのデフォルトの動作を置き換えるカスタムのタグ タイトル プロンプトを作成します。図に示すように:



JavaScript コード

コードをコピー

code 以下のように:

$(function() { 
$("a[title ]"). each(function() { 
var a = $(this); 
var title = a.attr('title'); 
if (title == 未定義 || title == "") return ; 
a.data('title', title) 
.removeAttr('title') 
.hover( 
function () { 
var offset = a.offset (); 
$("
").appendTo($("body")).html(title).css({ トップ: offset.top a.outerHeight( ) 10、左: offset.left a.outerWidth() 1 }).fadeIn(function () { 
var Pop = $(this); 
setTimeout(function () { Pop.remove (); } , Pop.text().length*80); 
}, 
function() { $("#anchortitlecontainer") } 
 ); 
}); 
}); 

JQuery を忘れずに引用してください。

コード内の setTimeout(function () { Pop.remove(); }, Pop.text().length*80); は、タイトルの長さに基づいてプロンプト時間を計算し、タイトル プロンプトが短すぎることを防ぎます。タイトルプロンプトが長すぎる、または長すぎる。

CSS コード

コードをコピーコードは次のとおりです:

#アンカータイトルコンテナ {
位置:絶対;
z-index: 5999;
パディング: 5px;
背景: なし繰り返しスクロール 0 0 #FFFFFF;
border-radius: 5px;
display: none;
#anchortitlecontainer:before {
position: 絶対; ;
左: -15px;
境界線の色: 透明透明 #315B6C;
境界線の幅: 15px; >コンテンツ: "";
表示: ブロック;
}
#anchortitlecontainer:after {
下: 自動; : 0px;
トップ: -13px;
ボーダー色: 透明透明 #FFFFFF;
ボーダー幅: 15px;
display: block;
width: 0;
}


画像の使用を避けるためにいくつかの CSS3 機能を使用します。

私は CSS の専門家ではないので、このスタイルを調整するのに時間がかかりました。もし誰かがそれを使ってくれたら光栄です。 :)