cssのみで簡単にロールオーバーを実現する方法
- タイトルとURLをコピーする
- Tweet

ロールオーバーを実現するには、
さまざまな方法があるかと思います
ボタンなどを画像でつくり、
ロールオーバーをするには、1枚画像で背景の位置を変えたり
2枚画像を用意して差し替えたりしていました。
でも、透明度を変えるこの方法なら
簡単にロールオーバーさせることが出来て便利です。
書き方のサンプル
HTML
<p class="hover"><img src="sample1.jpg" alt="sampleボタン1" /></p> <p class="hover"><img src="sample2.jpg" alt="sampleボタン2" /></p>
CSS
.hover a:hover img{
opacity:0.35;
filter: alpha(opacity=35);
-ms-filter: "alpha( opacity=35 )";
background: #fff;
}
コレだけです。
IE6でも動作します。
- タイトルとURLをコピーする
- Tweet

ECサイトで使える! 商品一覧の画像をいじらずに「売り切れ」などを表示させる方法
露出をオーバーめにして写真撮ってきた