CSSだけでポップアップ

このサイトのテクはJavaScriptを使いません。「CSSだけでリモートロールオーバー」の説明に、ポップアップ?といれたら、間違えて検索してこられる方が相当数おられます。それで、ポップアップのページも作る事にしました。Operaでは上手く作動しません。没ネタばかりですみません。

CSSだけでポップアップ説明・画像

おなじみの問題からです。
動作確認で問題なしは、Win のIE6/Firefox1.5・2。
問題ありは、Opera9はまったく作動せず、8.5では、残像が残ったりします。
Operaの多いサイトさんは絶対に使わないで下さい。

CSSだけでポップアップの作り方(簡単編)

純粋に文字だけ・画像だけなら、リンクさせたい文字の後ろに span でクラスを付けて最初は display:none。hover の時は display:block; とすれば浮かび上がります。後は、位置調整などをすれば OK です。かわいい吹き出しのコメント欄 | *LOVE IS DESIGN*のフキダシに触発されて、楽しそうに思えたもので、罫線で一応フキダシ風にしてみました。意味が通って、わかりやすくなったような気がします。

四角よりは、断然いい。でも、これでは楽しくない。いろいろ弄りたい。その後で、背景等入れて、普通のボックスと同じ感覚で遊んでみました。

見本2は、普通のリンクです。怒らないで背景いり。
(背景入り編が簡単編の続きにあります。「普通のリンクです」クリックで飛ばせます)

html のソースです

見本1は、<A href="#">普通のリンクです。<SPAN class=setumei>怒らないで</SPAN></A>これだけです。

CSS のソースです

.setumei {
	display: none;
	position: absolute;
	top: 1em;	/*★省略不可、ブラウザ初期値バラバラ*/
	left: 1em; 	/*★Firefoxでhoverが無効になります*/
}

a:hover {
	position:relative;
	text-decoration:none;
}
a:hover .setumei {
	display: block;
	background-color: #e79221;
	padding:3px;
	color:#ffffff;

CSSだけでポップアップの作り方(背景入り編)

ボックスをデザインする要領で背景など入れてみました。
注意する事は
borderに対する記述を必ず入れて下さい。罫が不要なら、none でも 0 でもいいので、入れて下さい。borderに対する記述が入っていないと、IEでhoverが効かなくなります。
spanで扱ってください。divにすると、改行が入り、本文がずれます。

見本2は、普通のリンクです。怒らないで。背景いり。

html のソースです

見本2は、<A href="#">普通のリンクです。<SPAN class="setumei e">怒らないで</SPAN></A>背景いり

ちょっと、横着します。class="setumei e"で、setumeiのクラスと、eのクラス両方を指定した事になります。つまり、簡単編のcssに下のソースを追加します。実際に使うときは、1つのクラスにまとめてしまって下さい。

CSS のソースです

a:hover .e {
	color:#e79221;
	width:300px;
	height:100px;
	background:white url(img/robu.gif) no-repeat;
	padding: 30px 3px 20px 120px;
	font-size: 0.9em;
	border:none;
}

CSSだけでホップアップおしまい