javascriptサンプルあなたのブログにjavascriptを使いませんか
ポップアップメニューこのメニューはスタイルシートで表示しています。
font要素に適用します説明文を赤色にしてみました。。
画像の説明文にも使えます。
リンクや画像にマウスを乗せるとポップアップメニュー、補足説明文を表示します
Javascript を使わず、スタイルシートだけで動作させています。
サンプルソース
<HTML>
<HEAD>
<TITLE>ポップアップメニュー、補足説明文を表示します。</TITLE>
<STYLE type="text/css">
<!--
.myshow { text-decoration:none;color:blue; } /* クラス名myshow の文字飾り none、文字色 blue */
a:hover { color:green; }/* マウスが来たときの文字色 green */
a.myshow span {
display:none; padding:5px; margin-left:10px; width:150px;
border:1px solid #cccccc; color:#000033;background-color:#ffffff;
}
a.myshow:hover span{ display:inline; position:absolute; }
display:none; padding:25px; margin-left:70px; width:200px;
border:2px solid #cccccc;background-color:#ffffff;
}
a.myshow:hover font { display:inline;color:red; position:absolute;}
-->
</STYLE>
</HEAD>
<BODY>
<P>
<a href="javascript:void(0);" class="myshow">javascriptサンプル<span>あなたのブログにjavascriptを使いませんか</span></a><br/>
<a href="javascript:void(0);" class="myshow">ポップアップメニュー<span>このメニューはスタイルシートで表示しています。</span></a><br/>
<a href="javascript:void(0);" class="myshow">font要素に適用します<font>説明文を赤色にしてみました。。</font></a><br/>
<a href="javascript:void(0);" class="myshow"><IMG src="https://javascript123.up.seesaa.net/image/purin.gif" width="64" height="56" border="0"><span>画像の説明文にも使えます。</span></a><br/>
</P>
</BODY>
</HTML>
a.myshow span { //クラス名が myshow であるアンカーテキストの span 要素に適用します。
display:none; //ボックスを非表示
padding:5px;//ボックスのボーダーより内側の余白
margin-left:10px;//ボックスのボーダーより外側 左の余白
width:150px; //ボックスの幅
color:#000033;//文字色,
background-color:#ffffff;//背景色
border:1px solid #cccccc; //枠線の太さ,種類,色
}
a.myshow:hover span{ display:inline; position:absolute; }//マウスが乗った時 inline ラベルで表示 位置は絶対位置(absolute)を指定
ではpadding:25px; margin-left:70px; width:200px; border:2px;と各数値を増やしてみました。
padding:*; margin-left:*; width:*; border:*;の作用が視覚的に解ると思います。
緑色の所に表示したい説明文を書いてください。
