CSS で ロールオーバー

HTMLとしての文書構造を維持しつつ、デザイン的にもすぐれたものをというわけで マウスカーソルをあてると背景が変化する、ロールオーバーをCSSで実現したいと思います。 CSS以外の方法としては、JavaScriptを使った方もあります。

ここでは、background-position を使って ロールオーバー をさせてみます。 HTMLは、リストとa要素でメニューを作成します。 ただし、今回の例ではフォントサイズを変更するとレイアウトが崩れます。 フォントサイズを固定する等の対策が必要です。

サンプル

<ul>
    <li id="home">
        <a href="https://www.bnote.net/">bnote</a>
    </li>
    <li id="htmlref">
        <a href="../05_ref_html401.html">HTMLリファレンス</a>
    </li>
    <li id="cssref">
        <a href="../13_ref_css21.shtml">cssリファレンス</a>
    </li>
</ul>

この例のポイントは、a要素に display:block を指定し、基本ブロックボックスを生成させることと a, a:hover and a:activeセレクタで background-position と color で 画像および文字色を変更するところにあります。

ここでは、hoverとそれ以外の状態で表示を変えるように背景に使う画像は、400pxの画像を用意しました。

背景のサンプル

li {
    list-style-type: none;
}
a {
    display: block;
    width: 170px;
    padding: 3px 0 4px 30px;
    font-weight: bold;
    background: url('img/rollover_simple.png') 0 0 no-repeat;
    color:#4d4b4b;
    text-decoration: none;
}
a:hover {
    background-position: -200px 0;
    color:#ffffff;
}
a:active {
    color:#4d4b4b;
}

背景画像を200pxずらすことによって ロールオーバーさせます。 a:active時の画像も変更したい場合、600pxの画像を用意し background-position: に-400pxと指定します。 動かすサイズに関しては、画像のサイズに合わせて設定します。