- ベストアンサー
画像ロールオーバーからテキストと背景のロールオーバーへ
リンクメニューの部分ですが、現在画像でロールオーバーさせている（背景色と文字色が変化する）のですが、そのリンク部分の文字はテキストにするようにとの指示がありました。 画像ではなくテキストにした場合に背景色と文字色が変化するにはどうすればよいでしょうか？ 下記左メニュー部分です。 http://www8.ocn.ne.jp/~soken-33/kono/ よろしくお願いいたします。
- rubato
- お礼率95% (23/24)
- JavaScript
- 回答数6
- ありがとう数9
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
すみません、ちょっと説明不足でしたね。 幅を指定すれば解決すると思います。 .xxx a { color:#xxx; background:#xxx; display:block; width:(枠の横幅)px; height:(枠の縦幅)px; } .xxx a:hover { color:#xxx; background:#xxx; } 枠の大きさが違うリンクが何種類かあったようなので、 種類の数だけ上記のCSSを記述します。 それを、class="xxx"で適用させます。
その他の回答 (5)
- yambejp
- ベストアンサー率51% (3827/7415)
メニューはulでやるというのがハヤリのようで、 構造的にも望ましいでしょう。 以下のようにしてみてください。 ポイントとしてはアンカー(aタグ)をblock要素にして 幅を指定し、メニュー（このばあいul）の幅とあわせる ことです。 まずcssファイルを用意します。 //menu.css .menu ul{ width:120px; list-style:none; padding:0px; margin:0px; } .menu a{ width:120px; height:25px; text-decoration:none; display:block; border-width:1px; border-style:solid; text-align:center; } .menu a:hover{ font-size:120%; font-weight:bold; } .menu1 a:link , .menu1 a:visited { background-color:ffecec; color:#000000; } .menu1 a:hover{ background-color:#c00000; color:#ffffff; } .menu2 a:link , .menu2 a:visited { background-color:ecffec; color:#000000; } .menu2 a:hover{ background-color:#00c000; color:#ffffff; } htmlファイルはこんな感じです。 <html> <head> <link rel="stylesheet" type="text/css" href="menu.css"> </head> <body> <div class="menu"> <ul class="menu1"> <li><a href="#">menu1-1</a></li> <li><a href="#">menu1-2</a></li> <li><a href="#">menu1-3</a></li> <li><a href="#">menu1-4</a></li> <li><a href="#">menu1-5</a></li> </ul> <ul class="menu2"> <li><a href="#">menu2-1</a></li> <li><a href="#">menu2-2</a></li> <li><a href="#">menu2-3</a></li> <li><a href="#">menu2-4</a></li> <li><a href="#">menu2-5</a></li> </ul> </body> </html>
お礼
早速のご回答ありがとうございました。 ulというやり方があるのですね。勉強になりました。どうもありがとうございました。
- m035
- ベストアンサー率44% (38/86)
>>2 >hoverはIE専用では？ 一昔前はともかく、最近のブラウザのほとんどで動作します。 むしろ、IEの方がA要素以外で動作しない点では劣っているともいえます。 >>0 HTMLが <a href="">text</a> で、CSSが A{color:#0000FF;background:#FFFFFF} A:hover{color:#FFFFFF;background:#0000FF} のように書かれていれば恐らくA:hoverでうまくロールオーバーできます。 それでもA:hoverがうまく動作しない場合は参考リンクを見て、それでも駄目ならWeb Page Designのカテゴリで質問すれば良いと思います。 JavaScriptに依存したロールオーバーよりかCSSのA:hoverの方が良いでしょうし、JavaScript無効時を考えて両方使っても良いでしょうから。
お礼
早速のご回答ありがとうございました。#1さんと同じ原理ですね！参考URLも分かりやすかったです。どうもありがとうございました。
- VCAT
- ベストアンサー率20% (16/79)
そういうことですか。 原理的にはこういうことです。これを応用してリンクにすればよいのでは？ <html> <head> <title>untitled</title> <style type="text/css"> <!-- #div1 { color: black; background-color:white; width:120px; } --> </style> <script type="text/javascript"> <!-- function changeColor(txColor,bgColor) { document.getElementById("div1").style.color = txColor; document.getElementById("div1").style.backgroundColor = bgColor; } // --> </script> </head> <body> <div id="div1" onMouseover="changeColor('#ffffff','#ffa64d')" onMouseout="changeColor('#000000','#ffffff')"> お問い合わせ</div> </body> </html> 但し、私はこのような場合は実際にはクロージャを使いますが、 それはご自分でまた勉強してください。
お礼
詳しい解説ありがとうございました。 早速試してみました！どうもありがとうございました。
- VCAT
- ベストアンサー率20% (16/79)
hoverはIE専用では？ プロとして仕事を受けているのならキチンと社内で聞くべきです。
お礼
ご回答ありがとうございました。 Webは趣味程度で本業ではないのですが、知人に聞かれたので私自身も勉強になると思い、自分なりに調べたのですが分からずに、こちらに投稿しました。
- ygyo0078
- ベストアンサー率66% (8/12)
CSSの疑似クラス簡単にできます。 a:hoverを使ってこのように組んでみてはいかがでしょう。 a { color:#xxx; background:#xxx;} a:hover {color:#xxx; background:#xxx;}
お礼
早速のご回答ありがとうございました。 試してみたのですが、背景の色がテキストの周りのみにしか入りませんでした(TOT) 枠全体の背景色とテキストのロールオーバーは不可能なのでしょうか？
お礼
詳しく分かりやすいご回答ありがとうございました。早速試してみました！どうもありがとうございました。