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

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

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

2008-04-09 (Wed)

FC2blog Tips

Tips
CSS

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

●リンクなしバージョン

<a class="tooltip">TRASH<span>Windows/Macのオススメソフト・Tips紹介ブログ</span></a>

●リンクありバージョン

<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 用テンプレート大変勉強になりました。感謝です。

Next Entries : Another HTML-lint gateway：HTML文書の文法をチェック
Prev Entries : 画像にマウスを乗せると別の画像に変化する

Comments:0

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 > 記事内のテキストにマウスを乗せて説明窓を表示させる

« 2009/07 »
S	M	T	W	T	F	S
-	-	-	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	-

« 2009/07 »