Chapter-01

Chapter-02

Chapter-03

Chapter-04

メニューボタンにロールオーバーの設定

このページでは、前回作成したメニューボタンにロールオーバーを設定します。
ロールオーバーは、ボタンにマウスが乗ったときに色が変わったりすることをいいます。

メニューのボタンに対してスタイルを指定

CSSでは、マウスが乗ったときのみにスタイルを与えることもできます。
以下のように、セレクタに対して「:hover」と書くと、その要素にマウスが乗ったときのみを指定します。

style.css
#left li a{
    /* 前のページで作成した部分 */
}

#left li a:hover{
    background:rgb(60%,60%,60%);
    color:rgb(100%,100%,100%);
}
:hover擬似クラスの一つで、マウスが乗ったときのみに適用する。

上のように、:hoverが付かない方は残しておき、別のセレクタとして書き足してください。

ちなみに、:hoverが付かない方の「#left li a{～}」のスタイルが全てそのまま引き継がれるので、書くのは「変化するスタイル」だけで構いません。

今回は背景色と文字色のみを変えました。

確認

マウスを乗っけてみて、色が変われば正しく適用できています。

見本ページを新しいタブで開く

これで見本と同じページが完成しました。

メニュー部分のソース

ソースを表示

style.css
#left li a{
    background:rgb(85%,85%,85%);
    border-left:3px solid rgb(25%,25%,25%);
    color:rgb(25%,25%,25%);
    padding:5px 10px;
    margin:0 0 10px 0;
    text-decoration:none;
    display:block;
}
#left li a:hover{
    background:rgb(60%,60%,60%);
    color:rgb(100%,100%,100%);
}
PAGE TOP