Internet Explorer、Firefox、Safari for Windows、Operaで確認しましたが、いずれも問題なし。
是非、使ってみてください。


サンプル１：
マウスを乗せてください。乗せたね？

サンプル２：
↑に透明度を付けてみると…
マウスを乗せてください。透けてますよね？

サンプル３：
更に応用するとロールオーバー効果が得られます。
Download


ソース
サンプル１：
<style type="text/css"> a.popup1{position:relative;} a.popup1 span{ position:absolute; top:-20px; left:50px; display:block; padding:5px; visibility:hidden; background:#29f; border:1px solid #999; color:#fff; font:normal 10px MS Gothic; } a.popup1:hover, a.popup1:hover span{visibility:visible; text-decoration:none;} </style> <a class="popup1" href="#">マウスを乗せてください。<span>乗せたね？</span></a>
サンプル２：
<style type="text/css"> a.popup2{position:relative;} a.popup2 span{ position:absolute; top:-20px; left:50px; display:block; padding:5px; visibility:hidden; background:#29f; border:1px solid #999; color:#fff; font:normal 10px MS Gothic; filter:alpha(opacity=70); -moz-opacity:0.70; opacity:0.70; } a.popup2:hover, a.popup2:hover span{visibility:visible; text-decoration:none;} </style> <a class="popup2" href="#">マウスを乗せてください。<span>透けてますよね？</span></a>
サンプル３：
<style type="text/css"> a.sample { background:url('/shared/img/download.png') no-repeat scroll top right; display:block; width:90px; height:24px; text-decoration:none; font:bold 10px Verdana; text-align:right; padding:4px 10px 0 0; color:#fff; } a.sample:hover { filter:alpha(opacity=90); -moz-opacity:0.90; opacity:0.90; color:#fb0; text-decoration:none; } </style> <a class="sample" style="color:#fff;" href="#">Download</a>

参考記事

• Mandarin Design.
• IE・Firefox・Opera・Netscape・Safariで表示可能な半透明CSS/Opacityテクニック
• ほとんどのブラウザで背景の半透明化を可能にするCSS指定
• CSSでロールオーバーもどき
• CSSでポップアップネタ・改正版

• タグ
• CSS
• opacity
• ロールオーバー
• 透明