シンプルなjQuery + CSSを使用してカスタムタグタイトルツールチップを作成します

導入

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

Javascriptコード

コードをコピー

コードは次のとおりです。

</pre><pre name="code" class="javascript">$(function() {
$("a[タイトル]").each(function() {
var a = $(これ);
var title = a.attr('title');
if (title == undefined || title == "") return;
a.data('タイトル', タイトル)
.removeAttr('タイトル')
.ホバー(
関数（） {
var オフセット = a.offset();
$("<div id=\"anchortitlecontainer\"></div>").appendTo($("body")).html(title).css({ 上部: offset.top + a.outerHeight() + 10、左: offset.left + a.outerWidth() + 1 }).fadeIn(function () {
var pop = $(これ);
setTimeout(関数() { pop.remove(); }, pop.text().length*80);
});
},
関数() { $("#anchortitlecontainer").remove(); }
);
});
});

jQuery を参照することを忘れないでください。

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

CSSコード

コードをコピー

コードは次のとおりです。

#アンカータイトルコンテナ {
位置: 絶対;
zインデックス: 5999;
境界線: 実線 1px #315B6C;
パディング: 5px;
色: #315B6C;
背景: なし繰り返しスクロール 0 0 #FFFFFF;
境界線の半径: 5px;
表示: なし;
}
#アンカータイトルコンテナ:前{
位置: 絶対;
下部: 自動;
左: -1px;
上: -15px;
境界線の色: 透明透明透明 #315B6C;
境界線のスタイル: solid;
境界線の幅: 15px;
コンテンツ： "";
表示: ブロック;
幅: 0;
}
#アンカータイトルコンテナ:後{
位置: 絶対;
下部: 自動;
左: 0px;
上: -13px;
境界線の色: 透明透明透明 #FFFFFF;
境界線のスタイル: solid;
境界線の幅: 15px;
コンテンツ： "";
表示: ブロック;
幅: 0;
}

いくつかの CSS3 機能を使用し、画像の使用は避けてください。

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

<<: MySQLインデックスマージの使い方

>>: CSS を使用して固定ナビゲーションと左右スライドを備えたスクロールバーを作成する方法