Home > 20080409

20080409

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

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

Home > 20080409

Search

Adsense

Calendar

Categories

Tagcloud

Archives

« 2008/04 »
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	-	-	-

Recent Comments

Recent Trackback

Feeds

↑Page Top