ロールオーバーのやり方を教えて下さい。

質問

http://www.shinetworks.net/cgi-bin/img-up/src/1231681697806.jpg

上記のように横並びで、ボタンごとに色が違い、カーソルを重ねるとその色が（例：緑だったら、きみどりになるなど）薄くなり、少し上に飛び出るというメニューを作りたいのですが、方法が分かりません。
いくつもCSSが載っているサイトを拝見したのですが；いまいち理解できず困っています。

どなたがご存知の方がいらっしゃいましたらご教授願います。

回答No.2

noname#83877 · ベストアンサー

勘違いしていたかもしれないのですが、もしかして少し上に飛び出るという部分が中心の質問でしたか？
それなら

a:hover {
position:relative; bottom:1px;
}

のようにposition:relative;を使います。

お礼

metametamuさま、ご回答ありがとうございます。

No.1,2を参考にチャレンジしてみます、ありがとうございます。

補足

すみません、書き忘れてしまいましたが
No.1,2というのは回答のことです。言葉足らずで申し訳ありません。

回答No.3

ORUKA1951

<ol id="siteMap">
　　<li><a href="index.html">トップへ</a></li>
　　<li><a href="profile.html">自己紹介</a></li>
　　<li><a href="books.html">書籍</a></li>
　　<li><a href="diary.html">日記</a></li>
　　<li><a href="sitemap.html">サイトマップ</a></li>
</ol>
というHTMLがあるとして、
・ol#siteMapをブロック要素にしてから、absoluteやrelativeで配置する。
・ol#siteMap > li　をブロックにしてfloatで配置する。
・ol#siteMap > li > a もブロックにして、liブロック一杯にすしcursorを変える。
　隣接セレクタを利用して、各行の色を変える。
・ol#siteMap > li >a:hover ・・擬似クラスで、aのサイズや色、cursorを変える。

お礼

ORUKA1951さま、ご回答ありがとうございます。

HTMLがあるとして…までは理解できるのですが、CSSが本当に苦手で、、
どうやって設定をしたら良いかが分からないのですが。。。

理解力がなくて申し訳ありません；

補足

以下で記述しているのですが、画像が表示されなくて困っています。
どこがおかしいのでしょうか？

[HTML]↓
<ul>
<li class="m1"><a href="test.html">てすと</a></li>
<li class="m2"><a href="test.html">てすと</a></li>
<li class="m3"><a href="test.html">てすと</a></li>
<li class="m4"><a href="test.html">てすと</a></li>
<li class="m5"><a href="test.html">てすと</a></li>
</ul>

[CSS]↓

li{
list-style-type:none;
width:150px;
height:50px;
float:left;
}
a{
display:block;
height:100%;
text-indent:-9999px;
}
li.m1{
background:url(../img/top_btn.jpg);
}
li.m1 a{
background:url(../img/top_btn2.jpg);
}
li.m2{
background:url(../img/prem_btn.jpg);
}
li.m2 a{
background:url(../img/prem_btn2.jpg);
}
li.m3{
background:url(../img/preze_btn.jpg);
}
li.m3 a{
background:url(../img/preze_btn2.jpg);
}
li.m4{
background:url(../img/yougo_btn.jpg);
}
li.m4 a{
background:url(../img/yougo_btn2.jpg);
}
li.m5{
background:url(../img/yougo_btn.jpg);
}
li.m5 a{
background:url(../img/yougo_btn2.jpg);
}

回答No.1

noname#83877

ロールオーバーも状況に応じてcssとjavascriptのどちらかを使えばいいのかが変わってきます。

メニューの文字が画像で無い場合はCSSでやる方が楽です。
その場合は

a:hover {
background:url(image.gif); /* ここのパスを対象の画像に */
}

でできます。

もしもデザイン等の都合で文字も画像になるようでしたらjavascriptの方がユーザーのことを考慮した対応ができるためオススメです。

http://javascript.webcreativepark.net/library/imagereplacejs
ここのスクリプトが簡単ではないでしょうか。
cssでできないことも無いですが、画像がオフの時などいろいろな環境を考慮するとオススメはできません。