cssの半透明(opacity)記述だけで、クロスブラウザ対応の簡易ロールオーバーを実装したい

css

normal時とhover時の画像を用意せずともcssの半透明(opacity)処理だけでロールオーバーを実現する方法。

css

.btn a{
display:block;
width:100px;
height:20px;
text-indent:-9999px;
background:url(/*画像のURL*/) no-repeat;
}


.btn a:hover
	{
background-color:#FFFFFF;
  filter: alpha(opacity=25);
  -moz-opacity:0.25;
  opacity:0.25;
  }

html

<div class="btn"><a href="/">TOP</a></div>

2012/3/8追記

このスクリプトを使用する際は下記のようにimgタグをもつaタグだけに適用されるクラス名（ここではbtnLink）をつける、
あるいは適用範囲をdiv等で指定してあげるなど、ある程度適用範囲を絞ってから使わないと、
もろもろ不具合箇所が生じてしまいます。

$("a:has(img)").addClass("btnLink");
});