応用：メニューボタンを マウスを乗せたときとはずしたときで違う表示にしたい場合

メニューボタンを

マウスを乗せたときとはずしたときで違う表示にしたい場合

a(またはa:link)の設定とa:hoverの設定が必要になります。

1.  a(またはa:link)はリンクをはった文字や画像をdiv boxの中に表示する場合

(メニューの文字にリンクをはる場合)用のcss

2.  a:hoverはdiv boxの中のリンクをはった文字や画像の上に

マウスを乗せたときに表示をかえたい場合用のcss

div boxの設定を作るときに

idにしているかclassにしているかで表記の仕方が違います。

↓クリックで詳細な説明のあるページへジャンプします。


:hoverや:linkの他にも:visited :focus などの設定があります。

さらに応用編↓
http://lopan.jp/css-animation/

Q:【CSSで動く設定の仕方を習得した方が良い理由は？】

CSSで動く設定をしたものはほとんどの環境で動作します。
Javascriptで設定したものは閲覧者がJavaをOFFにしていると動作しません。
また、:hoverはタッチパネルのデバイスでは動作しません。
その場合は :focus のCSSでの設定が必要です。

※ちなみに教科書の第8章で紹介されているロールオーバーはJavascriptです。

idやclassを独自に設定せずに
ulとliのHTMLタグを使ってメニューボタンを作る事が一般的に多いので
その具体的な作例を紹介 (動いている様子はこちらを参照)
↓

----------------------HTML----------------------

<ul>

<li class="menu01"><a href="">日記</a></li>

<li class="menu01"><a href="">掲示板</a></li>

<li class="menu01"><a href="">リンク</a></li>

<li class="menu01"><a href="">メール</a></li>

<li class="menu01"><a href="">ホーム</a></li>

</ul>

----------------------CSS----------------------
.menu01 {
          line-height:30px;
          margin:1px;
          text-align:center;
          width:130px;
          font-size:14px;
          }
.menu01 a {
          background-color:#DFEBFD;
          border-width:0px 5px 0px 5px;
          border-style:solid;
          border-color:#003399;
          text-decoration:none;
          color:#3399CC;
          display:block;
          width:100%;
          }
.menu01 a:hover {
          border-width:0px 5px 0px 5px;
          border-style:solid;
          border-color:#FF6666;
          color:#FF6666;
          background-color:#FFCCCC;
          text-decoration:none;
          width:100%;
          display:block;
          font-weight:bold;
          }
 .menu01 a:visited {
          width:100%;
          display:block;
          }

.menu01 a:focus {
          border-width:0px 5px 0px 5px;
          border-style:solid;
          border-color:#FF6666;
          color:#FF6666;
          background-color:#FFCCCC;
          text-decoration:none;
          width:100%;
          display:block;
          font-weight:bold;
          }