電子書籍の厳選無料作品が豊富!

ごめんなさい。
前にも質問して、回答をいただいて、納得して締め切ったはずの質問が、いざコーディングしてみると動きませんでした。反省しています。やはりちゃんと動くのを確認してからでないと駄目ですね。ということでもう一度同じ質問を出します。ご容赦願います

マウスを乗せると背景色が変わる仕組みは、たしかa=hoverで可能でしたよね。

そこで問題が発生しました。
私は今サイトを作っていて、左側のメニューバーについてはマウスを乗せると背景色が変わるリンクにしたいんですが、普通の文章中に出てくるリンクについてはそういう仕様から外したいんです。

でもa=hoverを使うと全てのリンクに同じ設定が適合されてしまいますよね?CLASSで個別に設定しようとしても無理でした。どうすればいいですか?

そこでJAVASCRIPTというものを利用して、マウスを乗せるとその文字背景(もしくはボックス内の背景)が
変わる仕組みを実現できるはずなんですが、具体的なソースコードは知りませんかね?できればボックスごとのオンマウス時の背景色を設定できるようにしたいです

A 回答 (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>
    • good
    • 0

やり方については他の方の回答にありますので、うまくいかなかった場合。



http://openlab.ring.gr.jp/k16/htmllint/htmllint. …
↑HTMLの検証サービス
http://www.htmlhelp.com/tools/csscheck/
↑CSSの検証サービス(英語)

等を使用してうまくいかないページをチェックしてみるといいかもしれません。

またFirefoxの「Javascriptコンソール」ではJavascriptだけではなくCSSのエラーも検出してくれます。
http://www.mozilla-japan.org/products/firefox/
↑Firefox
    • good
    • 0
この回答へのお礼

みなさんありがとうございました
クラスの宣言の順番が逆だったみたいですね
解決いたしました

お礼日時:2006/01/15 18:39

<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>

参考URL:http://www.nextindex.net/web/CSS/selector.html
    • good
    • 0

これのような事例でまともに動きませんか?



<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">パターン1</a>
<a href="[URL]" class="menu2">パターン2</a>
<a href="[URL]">指定なし</a>
</body>
</html>
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!