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


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");
});