ヽ( ・∀・)ノくまくまー(2006-09-07)

2006-09-07 [長年日記]

● CSSでポップアップ

ちょっとした説明文をポップアップするには "title" 属性が便利であるが、複数行表示がブラウザに依存し、画像を含んだコンテンツには対応できない。かと言ってJSを持ち出すのも面倒だと思っていたら、CSSのみで実現できるらしい。そのまとめ。(via RailsChat)

CSS

.popup .tips {
  display         : none;
  position        : absolute;
}

.popup a:hover {
  position:relative;
}

.popup a:hover .tips{
  display          : block;
  top              : 30px;
  left             : 20px;
  white-space      : nowrap;
  text-decoration  : none;
  border           : 1px solid black;
  color            : black;
  background-color : #FFFFAA;
}

これにより "popup" 内は、"a" リンク部分のマウスオーバー時に、同リンク中の "tips" クラスの内容が表示される。

HTML

<div class="popup">
ミハエル・シュー
<a href="#">
<div class="tips"><pre>
　　　 　 ☆ノハヽ　　　　　
ブロロロ 　从 ’ｗ’)　　
三三　〓（　 0┳0　　　
三　 　◎'━◎┻ ）
ミハエル・シュー・マイハ巡回中！
</pre></div>
[kwsk]
</a>
</div>

[実行結果]

● ハマリ

IE はこの形式を認識しない

a.popup:hover {

● 追記(20060919)

IE は "href" が必要だった

<a>            # ← ポップアップしない
　　　↓
<a href="#">   # ← ポップアップする

本日のツッコミ(全4件) [ツッコミを入れる]

_ 一般人 (2006-09-12 14:49)

ttp://www.k5.dion.ne.jp/~i-araki/css/onmouse.html<br>IEにも対応、cssオンリー。

_ しん (2006-09-17 01:26)

これじゃ駄目なの？と思ったので書いてみました。<br>ttp://cureblack.com/20060917.html

_ a (2006-09-17 09:55)

Opera9、IE６じゃ不可です。

_ 从 ’w’) (2006-09-19 17:18)

IEでも動くものを載せたつもりが、"href" を抜いただけで動かなくなってた＞＜<br>今度は動くはずでし。情報ありがとうございます！


		2006年 9月
日	月	火	水	木	金	土
					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