- ベストアンサー
オンマウス時の背景色を個別に設定したい
ごめんなさい。 前にも質問して、回答をいただいて、納得して締め切ったはずの質問が、いざコーディングしてみると動きませんでした。反省しています。やはりちゃんと動くのを確認してからでないと駄目ですね。ということでもう一度同じ質問を出します。ご容赦願います マウスを乗せると背景色が変わる仕組みは、たしかa=hoverで可能でしたよね。 そこで問題が発生しました。 私は今サイトを作っていて、左側のメニューバーについてはマウスを乗せると背景色が変わるリンクにしたいんですが、普通の文章中に出てくるリンクについてはそういう仕様から外したいんです。 でもa=hoverを使うと全てのリンクに同じ設定が適合されてしまいますよね？CLASSで個別に設定しようとしても無理でした。どうすればいいですか？ そこでJAVASCRIPTというものを利用して、マウスを乗せるとその文字背景（もしくはボックス内の背景）が 変わる仕組みを実現できるはずなんですが、具体的なソースコードは知りませんかね？できればボックスごとのオンマウス時の背景色を設定できるようにしたいです
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
コレじゃあダメですか？ <HTML> <HEAD> <STYLE type="text/css"> <!-- A:HOVER{ background-color : red; } --> </STYLE> </HEAD> <BODY> <P><A href="http://www.google.co.jp/">背景色の変わるリンク</A></P> <P><A href="http://www.google.co.jp/" style="background-color : #ffffff;">普通のリンク</A></P> </BODY> </HTML>
その他の回答 (3)
- steel_gray
- ベストアンサー率66% (1052/1578)
やり方については他の方の回答にありますので、うまくいかなかった場合。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ↑HTMLの検証サービス http://www.htmlhelp.com/tools/csscheck/ ↑CSSの検証サービス(英語) 等を使用してうまくいかないページをチェックしてみるといいかもしれません。 またFirefoxの「Javascriptコンソール」ではJavascriptだけではなくCSSのエラーも検出してくれます。 http://www.mozilla-japan.org/products/firefox/ ↑Firefox
- cyokokichi
- ベストアンサー率21% (32/152)
<html> <head> <title>aaa</title> <style type="text/css"> <!-- /*menu内のa要素の背景色のみ変更する*/ .menu a{background-color:#******} .menu a:hover{background-color:#------} /*content内のa要素の背景色のみ変更する*/ .content a{background-color:#******} .content a:hover{background-color:#------} /*footer内のa要素の背景色のみ変更する*/ .footer a{background-color:#******} .footer a:hover{background-color:#------} --> </style> </head> <body> <div class="menu"> <a href="***">aaa</a> </div> <div class="content"> <a href="***">aaa</a> </div> <div class="footer"> <a href="***">aaa</a> </div> </body> </html> javascriptで背景色を個別に指定する。 <a href="**.html" OnMouseOver="this.style.backgroundColor='#??????';" OnMouseOut="this.style.backgroundColor='#******';">aaa</a>
これのような事例でまともに動きませんか？ <html> <head> <title></title> <style type="text/css"> <!-- a:link{color:green;} a:visited{color:darkgreen;} a:hover{color:mediumseagreen;} a:active{color:mediumseagreen;} a.menu1:link{color:blue;} a.menu1:visited{color:darkblue;} a.menu1:hover{color:red;background:yellow;} a.menu1:active{color:red;} a.menu2:link{color:crimson;} a.menu2:visited{color:darkred;} a.menu2:hover{color:deeppink;background:peachpuff;} a.menu2:active{color:deeppink;} //--> </style> </head> <body> <a href="[URL]" class="menu1">パターン１</a> <a href="[URL]" class="menu2">パターン２</a> <a href="[URL]">指定なし</a> </body> </html>
お礼
みなさんありがとうございました クラスの宣言の順番が逆だったみたいですね 解決いたしました