CSSだけでポップアップヘルプを実現する

カテゴリ:CSSテクニック 2006年7月 5日 01:25

今回は、CSSのみを使ってポップアップヘルプを実現してみました。
どんなものかというと、特定の語句に説明をつける際、
ポイントしたときにヘルプ表示がポップアップで出てくるようなのを
見かけたことはありませんか?
あれを、javascriptを使わずに、しかも使い回しができるように
CSSで作成してみました。

サンプルはこちら↓
http://www.green.dti.ne.jp/edo/web-test/test10/

CSSはこちら↓
http://www.green.dti.ne.jp/edo/web-test/test10/index.css
↑サーバ解約したため、サンプルが消えてしまいました(;´д`)
時間をみて再アップします・・・。n

▼EntryMore▼

さてさて、サンプルを見てくれたということを前提で話を進めていきますw
今回のものは、若干問題があり、IEで見るとポップアップ用のCSSを書いた親ボックスより、
後に出てくるボックスのがうえになってしまい、ポップアップ部分が下にもぐりこんでしまう、とい不具合があります。(Firefoxでは正常に動作します)
ただ、動きがIEの場合不安定で、上に表示させようとすると今度は表示位置がずれてしまうので、
特定の条件下のみでしか不具合が出ないので強硬突破ですw
(もし、これの解決策があったら連絡くださいorz)

さてさて、それでは本題。
まずはHTMLソースから。
a要素の中にspan要素を配置しています。
もちろん、このa要素の前後に文章があってもちゃんと動作します。n

ではCSSソース。

簡単に説明すると、classがpopupの要素の中にあるspanをまず非表示にします。
そのあとで、以前にポップアップメニューのときに触れた
:hover spanを使い、マウスオーバーのときだけ姿を現すように設定します。
しかし、ここで1点注意点があります。
win IEの場合、なぜか.popup:hoverの中身が空だと動作しません。
なので、ここではdisplay:inlineを使って動作させています。
(a要素はもともとinline要素ですが、同じことを書くことで空をなくし、
かつ無駄な表示(borderやbackgroundなど)をさけるために書いています)

さて、次に注目すべきはposition:absoluteでしょうか。
これにより、spanの中身が表示されたときに他の要素の配置を邪魔するのを防ぎます。
また、popup自体にposition:relativeを設定しているので、topとleftを設定しても変なところに表示されません。
(position:absoluteを設定している上のボックスにposition:relativeを設定すると
それが基準となり、top:0はそのボックスの上端に合わさります)
表示位置は、topとleftをいじって微調整が可能です。

とりあえず主要な部分はこんな感じかな?(^-^;
不明点、不具合なんかあったらコメントで連絡ください(*'-')

この記事のカテゴリー一覧を見る⇒CSSテクニック

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/9

トラックバック

スタイルシートでドロップシャドウ

微妙にいけていないのが本音のところだけど、次のブログで使おうと思ったので、メモメモ。要するに、背景に影をかますだけなんだけどこれをやる上でかなり問題が出て...

byweb初心者がそろそろmovabletype 2006年7月 6日 01:19

コメント

1 - show-hey さん

はじめまして。同じ様にお勉強サイトを作成しているものです。rr失礼かもしれませんが、同じような立場(CSS等を勉強している)として、見てて違う観点をもってたりしてとっても刺激になりました。よかったらうちのサイトも除いてみてください。rrまた、ちょこちょこのぞかせてもらいます。rrhttp://blog.show-hey.com/

2006年7月 6日 01:22

2 - えど さん

どもです。rCSSでもわりとプログラム的な動きができるなーということに気づき、色々やってみよーというコンセプトのもと始めたブログです。r刺激になったようでうれしいですね(=´▽`=)rありがとうございます!rrぜひぜひ、show-heyさんのサイトも見させて頂きます(*'-')

2006年7月 6日 09:09