kzms2 – html,css,javascript

ちょこっとした小ネタですが…

モダンブラウザの場合の表示

CSS3をサポートしているブラウザだと上の様に見えます。

古いブラウザの場合

古いブラウザになればなるほどしょぼい表示になります。
うーん、しょぼいですね。とりあえず詳細は続きに。

ソースについて

css

サンプルはこちら.hkdsWp:hover .hkds{
/*マウスカーソルが重なったら表示*/
visibility:visible;
}
.hkds{
/*通常の状態は非表示*/
visibility:hidden;
/*絶対配置に*/
position:absolute;
/*ネガティブマージンで位置を調整*/
margin:-2.4em 0 0 -2.3em;
/*レイアウト調整*/
padding:0.3em;
line-height:1;
/*ボーダーで影っぽく調整*/
border-style:solid;
border-color:#336;
border-width:1px 2px 2px 1px;
/*色指定*/
background-color:#369;
color:#fff;
/*角丸処理（CSS3）*/
-moz-border-radius:5px;
-webkit-border-radius:5px;
/*ボックスシャドウ処理（CSS3）*/
-moz-box-shadow:2px 2px 7px #666;
-webkit-box-shadow:2px 2px 7px #666;
}
.hkds:after{
/*噴出しの出っ張り部分の表示*/
content:"◆";
/*噴出しの背景色と同色に*/
color:#369;
/*絶対配置で表示*/
position:absolute;
bottom:0;
left:1em;
margin-bottom:-0.5em;
line-height:1;
}
とこんな感じに設定しています。
詳細はコメントアウトに書いてあるのでそちらを参照してください。

HTML

<span class="hkdsWp">
リンク
<span class="hkds">
リンク先の説明だよ！噴出しだよ！！
</span>
</span>
HTMLはこのように入れ子になっています。
親要素（噴出しを出させたいリンクなど）には「.hkdsWp」を、子要素（噴出し部分）には「.hkds」というclassを追加してあげれば表示されます。

ページ内にも一応サンプルを

ここにカーソルを合わせるとリンク先の説明だよ！噴出しだよ！！

と言う感じでした。
またIEで使えない技なので需要はなさそうですね！