導入 シンプルな 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 を使用して固定ナビゲーションと左右スライドを備えたスクロール バーを作成する方法
目次1. これからお話しするのは、フロントエンド担当者がvue-cliで完了できるソリューション、デ...
1. HTMLの概要1.HTML: ハイパーテキスト マークアップ言語。これはプログラミング言語では...
順序付きリストXML/HTML コードコンテンツをクリップボードにコピー<オルタイプ= &qu...
今日、イメージを起動した後、HTTP リクエスト経由でアクセスできないという小さな問題が発生しました...
序文みなさんこんにちは。CSS ウィザードの alphardex です。以前、海外のウェブサイトを閲...
1. SSHリモート管理SSH の定義SSH (Secure Shell) は、主にキャラクタ イン...
目次1. ラベルステートメントの紹介2. ラベルステートメントの使用序文:日常の開発では、プログラム...
データベースに関して最もよく聞かれる質問の 1 つは、現在のビジネス ニーズを満たす MySQL の...
1. 最新のnginx dockerイメージをダウンロードする $ docker pull ngin...
⑴ 内容によって形式が決まります。まず内容を充実させ、次にブロックに分割し、トーンを決め、最後に細部...
Linuxアラーム機能の紹介上記のコード: #include <stdio.h> #in...
JD カルーセルは、動的な効果を追加せず、主に位置決めの知識を使用して、純粋な HTML と CS...
簡単に説明すると、これら 3 つの方法は、レンダリング プロップ、高階コンポーネント、カスタム フッ...
1. 文法 場所 [=|~|~*|^~|@] /uri/ { ... } 2. 説明上記の構文から、...
この記事では、Windows Server オペレーティング システムのインストールと企業でのそのア...