Home > スポンサー広告 > 記事内のテキストにマウスを乗せて説明窓を表示させる


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 Comments:-

Comment Form

 Trackback+Pingback:-

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/170-ec04aacb
Listed below are links to weblogs that reference
スポンサーサイト from TRASH
Trackback from 窓のおいしい情報教えます!FX必勝法 2008-04-09 (水) 20:33

驚愕!窓のあれを大公開!

こんにちは。いつもブログを見てくれてありがとうございます。それでは早速今日のブロ... (more…)

Home > スポンサー広告 > 記事内のテキストにマウスを乗せて説明窓を表示させる

Home > FC2blog Tips > 記事内のテキストにマウスを乗せて説明窓を表示させる


記事内のテキストにマウスを乗せて説明窓を表示させる

今回は、実装も簡単で面白い小技を紹介したいと思います。リンクにつかうアンカーテキスト(<a>です)にマウスを乗せると、説明窓(ツールチップ)がでる便利でちょっと格好良いTipsです。サンプルは以下の通りです。

●リンクなしバージョン
TRASHWindows/Macのオススメソフト・Tips紹介ブログ
<a class="tooltip">TRASH<span>Windows/Macのオススメソフト・Tips紹介ブログ</span></a>
●リンクありバージョン
TRASHWindows/Macのオススメソフト・Tips紹介ブログ
<a href="http://blackcat13numbers.blog31.fc2.com/" class="tooltip">TRASH<span>Windows/Macのオススメソフト・Tips紹介ブログ</span></a>

CSS編集では、以下を記述してください。
a.tooltip span {
   display:none;
   padding:5px 5px;
   margin-left:8px;
   width:200px;
}
a.tooltip:hover span {
   z-index:10;
   display:inline;
   position:absolute;
   border:1px solid #ccc;
   background:#fff;
   color:#6c6c6c;
}
勿論、CSS内の数値やカラーなどを変更することで、ツールチップのカスタマイズも可能です。アンカーテキスト以外だと、<p>でも使えるみたいで、この小技を勉強させていただいたサイトで詳細な説明が掲載されています。
FYI:以下サイトでも詳細を紹介しているので是非
Movable Type 備忘録|Movable Type 4.1 用テンプレート
大変勉強になりました。感謝です。
スポンサーサイト

 Comments:0

Comment Form

 Trackback+Pingback:1

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/170-ec04aacb
Listed below are links to weblogs that reference
記事内のテキストにマウスを乗せて説明窓を表示させる from TRASH
Trackback from 窓のおいしい情報教えます!FX必勝法 2008-04-09 (水) 20:33

驚愕!窓のあれを大公開!

こんにちは。いつもブログを見てくれてありがとうございます。それでは早速今日のブロ... (more…)

Home > FC2blog Tips > 記事内のテキストにマウスを乗せて説明窓を表示させる

Recent Comments
Recent Trackback
Feeds

↑Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。