メニュー風にボックスを2個作成してみた。 ソースは以下（ボックス1個だけ）

<div style="background-color: rgb(135, 251, 170); width: 150px; height: 22px; text-align: center; font-weight: bold; border-width: 1px 1px 1px 5px; border-style: solid; border-color: rgb(205, 205, 205) rgb(170, 170, 170) rgb(170, 170, 170) rgb(39, 156, 21);" onmouseout="this.style.backgroundColor='#87FBAA'" onmouseover="this.style.backgroundColor='#FBD887'">
    メニューＡ
</div>

ボックスにマウスを重ねると、文字の色が変わる。以下が、ソース。

<div style="width: 150px; height: 32px; background-image: url('./?action=common_download_main&upload_id=104');">
        <div onmouseout="this.style.color='#ffffff'" onmouseover="this.style.color='#990000'" style="font-weight: bold; text-align: center; color: rgb(255, 255, 255); padding-top: 6px;">
            文字色の入替
        </div>
        <br />
    </div>

  Ａ


  Ｂ


 背景 画像の入替

Ａの画像をボックスの背景として、マウスを重ねるとＢの画像に変わる。メニューボタンに使うと便利。
メニューが変わっても、テキストを変更するだけで良い。ソースコードは以下。

    <div style="width: 150px; height: 32px; background-image: url('./?action=common_download_main&upload_id=104');" onmouseover="this.style.backgroundImage='url(./?action=common_download_main&upload_id=105)'" onmouseout="this.style.backgroundImage='url(./?action=common_download_main&upload_id=104)'">
        <div style="font-weight: bold; text-align: center; color: rgb(255, 255, 255); padding-top: 7px;">
            背景画像入替
        </div>
        <br />
    </div>