導入 シンプルな 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 の専門家ではないので、このスタイルを思いつくのに時間がかかりました。誰かに使ってもらえれば光栄です。 :) |
>>: CSS を使用して固定ナビゲーションと左右スライドを備えたスクロール バーを作成する方法
wget や curl ツールを使用して、Linux サーバーで大規模なネットワーク ファイルを直接...
01 ウィンターフレーク(個人のみ) 02 スノートップキャップ(業務用) 03 モディウス「フリ...
この記事では、ある大学の健康報告システムを例に、Web 側の自動化操作を完成させます。使用したテクノ...
<br />ウェブページの色はウェブサイトのイメージを確立する鍵の一つですが、ネットユー...
ページネーションコンポーネントはWeb開発でよく使われるコンポーネントです。ページネーション機能を実...
protobufの簡単な紹介Protobuf は、Google のオープンソースのシリアル化プロトコ...
Nginx の主な設定ファイルは nginx.conf で、グローバル ブロック、イベント ブロック...
<body style="scroll:no"> <テーブルの...
<br />幅と高さが適応するオリジナルの 9 グリッド レイアウトをベースに、ネットワ...
<br />元の記事: http://www.alistapart.com/articl...
序文MySQL インデックスで最も重要なデータ構造は B+ ツリーなので、まずは B+ ツリーの原理...
この記事では、centos7にyumを使用してMySQL 8.0.12をインストールする詳細な手順を...
この記事では、LinuxでのMySQL 5.6.27のインストールチュートリアルを参考までに紹介しま...
タイトルの通り、ページを修正すると以下のような状況が発生する可能性があります。現在、古いページを改修...
テーブル ヘッダーの背景画像を設定します。任意の GIF または JPEG 画像ファイルを使用できま...