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

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

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で使えない技なので需要はなさそうですね！

下のようなボタン画像を

hover時（マウスカーソルが合った時）に画像をこれ以上用意せずに変化させるTipsです。
上のボタンにカーソルを合わせたら色が少し薄くなると思います。

対応ブラウザなど

CSS３は使用していません。対応ブラウザはIE5.5-IE8,Firefox3,Safari3,opera9などです。

ソースは続きに記載しておきます。

ソースコード（CSS)

a.alpha:hover img{
/*モダンブラウザ用*/
opacity:0.8;
/*IE7以下用*/
filter:alpha(opacity=80);
/*IE8用*/
-ms-filter:"alpha(opacity=80)";
}
※a.alpha imgの部分は、実際に適用する要素のidやclassを割り振ってください。
※a要素にhoverを割り当てているのは、IE6以下だとa要素以外にはhoverが効かないためです。

応用っぽいもの

応用と呼べるか判りませんが、逆に先に透過させておいて、カーソルを合わせたら透過をやめるというのもありかと思います。

a.alpha2 img{
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter:"alpha(opacity=80)";
}
a.alpha2:hover img{
opacity:1;
filter:alpha(opacity=100);
ms-filter:"alpha(opacity=100)";
}

ちょっとした説明

これはopacityを使って半透明の状態にして、変化を出しています。
IEはちょっと独自の書き方をしないとだめなので上のようなソースになっています…

すでに知ってる方などもいるでしょうが、知らなかった方は是非頭の片隅に置いておいてみてください。

画像だけでなく、他の部分にも流用を効かす事が出来るので、簡単にマウスカーソルを合わせた時に反応させたいときは是非どうぞ。
個人的には画像を用意することなく、マウスに反応させる事が出来るのでお勧めです。