CSSでのロールオーバー

ロールオーバーの参考例

サンプル

CSSソース

a.ex_link {
 width:70px;
 display:block;
 border:1px solid #999999;
 background-color:#000000;
 color:#FFFFFF;
 text-align:center;
 text-decoration:none;
 padding:1px 0;
}

a.ex_link:hover {
 color:#FF6600;
}

注意すべき点は「display:block;」でしょうか。
これがないといくらwidthを設定しても、変わりません。基本、a要素はインライン要素なのでブロック要素に変えてあげないといけません。
リンクに背景画像を使用したいときなどにこのブロック要素を記述しないと背景が全部表示されなかったりします。
※ブロック要素を使用した場合、widthが100％表示になってしまうので、widthの設定はお忘れなく。

ロールオーバーの参考例（背景に画像を使う場合）

リンク1

まず、下記のようなマウスが乗っかってない状態と、マウスが乗っかった状態の一枚の画像を用意します。
sample

CSSソース

a.ex_link {
 width:72px;
 height:22px;
 display:block;
 color:#FFFFFF;
 background:url(img/btn_sample01.jpg) no-repeat 0 0;
 text-align:center;
 padding:10px 0 0 0;
}

a.ex_link2:hover {
 background-position:0 -32px;
}

background:url(img/btn_sample01.jpg) no-repeat 0 0;で記述している、「0 0」ですが、「左からの位置 上からの位置」の数値を表しています。
hoverしたときにbackground-position:0 -32px;で背景画像を上に-32pxずらしています。

画像を一枚ずつにしてもいいんですが、そうするとマウスオーバーしたときにその画像を読み込むので一瞬画像が表示されないような状態になると思います。
それを回避するために、一枚の画像にしておけば、ページを表示させたときにマウスオーバー時の画像も読み込んでいるのでラグがなく表示出来ます。

例では文字はテキストで表示させています。この場合、高さはソースをご覧の通りpaddingで調整しております。お使いのブラウザの環境やブラウザの文字サイズの設定では位置がずれてしまうこともあると思います。
もし、この手法を使う場合は文字サイズを固定しちゃうのも一つの手かもしれないですね。

top