• ベストアンサー

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

http://www.shinetworks.net/cgi-bin/img-up/src/1231681697806.jpg 上記のように横並びで、ボタンごとに色が違い、カーソルを重ねるとその色が(例:緑だったら、きみどりになるなど)薄くなり、少し上に飛び出るというメニューを作りたいのですが、方法が分かりません。 いくつもCSSが載っているサイトを拝見したのですが;いまいち理解できず困っています。 どなたがご存知の方がいらっしゃいましたらご教授願います。

質問者が選んだベストアンサー

  • ベストアンサー
noname#83877
noname#83877
回答No.2

勘違いしていたかもしれないのですが、もしかして少し上に飛び出るという部分が中心の質問でしたか? それなら a:hover { position:relative; bottom:1px; } のようにposition:relative;を使います。

sam617
質問者

お礼

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

sam617
質問者

補足

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

その他の回答 (2)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

<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を変える。

sam617
質問者

お礼

ORUKA1951さま、ご回答ありがとうございます。 HTMLがあるとして…までは理解できるのですが、CSSが本当に苦手で、、 どうやって設定をしたら良いかが分からないのですが。。。 理解力がなくて申し訳ありません;

sam617
質問者

補足

以下で記述しているのですが、画像が表示されなくて困っています。 どこがおかしいのでしょうか? [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); }

noname#83877
noname#83877
回答No.1

ロールオーバーも状況に応じてcssとjavascriptのどちらかを使えばいいのかが変わってきます。 メニューの文字が画像で無い場合はCSSでやる方が楽です。 その場合は a:hover { background:url(image.gif); /* ここのパスを対象の画像に */ } でできます。 もしもデザイン等の都合で文字も画像になるようでしたらjavascriptの方がユーザーのことを考慮した対応ができるためオススメです。 http://javascript.webcreativepark.net/library/imagereplacejs ここのスクリプトが簡単ではないでしょうか。 cssでできないことも無いですが、画像がオフの時などいろいろな環境を考慮するとオススメはできません。

関連するQ&A

専門家に質問してみよう