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