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

シンプルな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 を使用して固定ナビゲーションと左右スライドを備えたスクロール バーを作成する方法

推薦する

SecureCRT に基づくリモート Linux ホストへのファイルのアップロードとダウンロードのグラフィカルな手順

wget や curl ツールを使用して、Linux サーバーで大規模なネットワーク ファイルを直接...

ダウンロードにおすすめの氷と雪のフォント 33 種類 (個人用および商用)

01 ウィンターフレーク(個人のみ) 02 スノートップキャップ(業務用) 03 モディウス「フリ...

自動ヘルスレポートを実現するDocker+Selenium方式

この記事では、ある大学の健康報告システムを例に、Web 側の自動化操作を完成させます。使用したテクノ...

ウェブページのエクスペリエンス: ウェブページのカラーマッチング

<br />ウェブページの色はウェブサイトのイメージを確立する鍵の一つですが、ネットユー...

JavaScriptページングコンポーネントの使い方の詳細な説明

ページネーションコンポーネントはWeb開発でよく使われるコンポーネントです。ページネーション機能を実...

protobuf の簡単な紹介と Ubuntu 16.04 環境でのインストールチュートリアル

protobufの簡単な紹介Protobuf は、Google のオープンソースのシリアル化プロトコ...

Nginx設定ファイルの詳細な説明

Nginx の主な設定ファイルは nginx.conf で、グローバル ブロック、イベント ブロック...

HTML 適応テーブル方式

<body style="scroll:no"> <テーブルの...

適応的な幅と高さを持つ9つの正方形グリッドの背景画像の切り取りの分析

<br />幅と高さが適応するオリジナルの 9 グリッド レイアウトをベースに、ネットワ...

ウェブデザインとは何か

<br />元の記事: http://www.alistapart.com/articl...

初心者向けMySQLインデックス

序文MySQL インデックスで最も重要なデータ構造は B+ ツリーなので、まずは B+ ツリーの原理...

CentOS7 は yum を使用して mysql 8.0.12 をインストールします

この記事では、centos7にyumを使用してMySQL 8.0.12をインストールする詳細な手順を...

Linux での MySQL 5.6.27 インストール チュートリアル

この記事では、LinuxでのMySQL 5.6.27のインストールチュートリアルを参考までに紹介しま...

スタイルを書く際の背景色宣言の重要性

タイトルの通り、ページを修正すると以下のような状況が発生する可能性があります。現在、古いページを改修...

HTML テーブル マークアップ チュートリアル (37): 背景画像属性 BACKGROUND

テーブル ヘッダーの背景画像を設定します。任意の GIF または JPEG 画像ファイルを使用できま...