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

推薦する

Vueデータプロキシの詳細な説明

目次1. これからお話しするのは、フロントエンド担当者がvue-cliで完了できるソリューション、デ...

HTMLの基本タグと構造の詳細な説明

1. HTMLの概要1.HTML: ハイパーテキスト マークアップ言語。これはプログラミング言語では...

HTML の順序付きリスト、順序なしリスト、定義リストに関する簡単な説明

順序付きリストXML/HTML コードコンテンツをクリップボードにコピー<オルタイプ= &qu...

Dockerはコンテナポートバインディングのローカルポートを実装します

今日、イメージを起動した後、HTTP リクエスト経由でアクセスできないという小さな問題が発生しました...

three.js で 3D ダイナミック テキスト効果を実現する方法

序文みなさんこんにちは。CSS ウィザードの alphardex です。以前、海外のウェブサイトを閲...

Linux リモート管理と sshd サービス検証の知識ポイントの詳細な説明

1. SSHリモート管理SSH の定義SSH (Secure Shell) は、主にキャラクタ イン...

js タグ構文の使用法の詳細

目次1. ラベルステートメントの紹介2. ラベルステートメントの使用序文:日常の開発では、プログラム...

MySQLは適切なストレージエンジンを選択します

データベースに関して最もよく聞かれる質問の 1 つは、現在のビジネス ニーズを満たす MySQL の...

Docker に nginx をインストールし、https 経由でアクセスを構成する方法

1. 最新のnginx dockerイメージをダウンロードする $ docker pull ngin...

ウェブデザインでは、まずウェブサイトの包括的なイメージの位置付けが必要です。

⑴ 内容によって形式が決まります。まず内容を充実させ、次にブロックに分割し、トーンを決め、最後に細部...

Linuxのアラーム機能の例の説明

Linuxアラーム機能の紹介上記のコード: #include <stdio.h> #in...

JDカルーセル効果を実現するための純粋なHTMLとCSS

JD カルーセルは、動的な効果を追加せず、主に位置決めの知識を使用して、純粋な HTML と CS...

Reactでコンポーネントロジックを共有する3つの方法

簡単に説明すると、これら 3 つの方法は、レンダリング プロップ、高階コンポーネント、カスタム フッ...

Nginx ロケーションマッチングルールの例

1. 文法 場所 [=|~|~*|^~|@] /uri/ { ... } 2. 説明上記の構文から、...

仮想マシンに Windows Server 2008 オペレーティング システムをインストールする

この記事では、Windows Server オペレーティング システムのインストールと企業でのそのア...