第 9 回目は「 CSS だけで実現する画像ボタンのロールオーバー」です。 javascriptを使用せずに、ロールオーバー効果をCSSのみでやってみましょう。 以下のボタン画像にマウスをのせてみてください。 サンプル1. 位置をずらす XHTML <p class="sample1"><a href="#"> <img src="hogehoge" alt="ボタン" width="200" height="50" /></a></p> .sample1 a:hover { position: relative; top: 1px; left: 1px; } positionプロパティを使って位置をずらします。 サンプル2. 透過させる XHTML <p class="sample2"><a href="#"> <img src="hogehoge" alt="ボタン" width="2
![[使えるCSSテクニックVol.2] 第 9 回 CSS だけで実現する画像ボタンのロールオーバー | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)