リンクに触れると

質問

http://keepsurfing.net/
このサイトのようにメニューに触れると画像が出るようにするにはどうすればいいでしょうか？
色々調べてみたのですがわかりませんでした。
教えてください。

あと同じようにリンクに触れたときに背景の色を換える為にCSSで
background-color : #8b0000;
で、触れた時だけ背景に色がつくようにしてるのですが文字の部分にしか背景色って表示されず余白がでいてしまいますよね？
あれをボックスの中全体の色を変えたいのです。

どちらかだけでかまわないのでわかる方いたら教えてくださいよろしくお願いします。

回答No.4

noname#199778 · ベストアンサー

質問文にある参考にしているサイトをみてきましたが、スタイルシートのみで対応しているようですね。 JavaScriptによる処理ではなく、a:hoverを使って背景画像を指定しているだけのようです。
そのサイトのソースから外部スタイルシートを辿ってスタイル指定を見てみましたが、まずリンクをリスト(ul要素)の中身として表示させ、そのリスト内にあるリンクに対して

ul.class名 a:hover{
background-image: url('画像ファイルのURL');
background-repeat: no-repeat;
}

と言うような書式で、特定のクラス名を持つ要素に含まれるリンクにおいて、そのリンクの上にカーソルがきた時にだけ指定の背景画像を表示させると言うことができるようです。
他にもいくつかの指定がされているようですので、全体的なスタイル指定の内容を把握したい場合は、ソースを見て外部スタイルシートのURLを辿り、中身を覗いてみるのが良いと思います(こうして外部スタイルシートファイルを見てしまうのは、あまりお行儀の良いやり方とはいえないかもしれませんが…)。

リンクに触れた時に背景色を変えるスタイルシートで、文字以外の部分の背景色も変更したい場合は、a要素に対してpaddingを指定するなどして、その表示範囲を文字よりも大きめに取ってやることである程度までは対応できるのではないかと思います。 こちらについては、背景色で染めたい範囲に応じて適宜設定する必要があると思いますので、詳細についてはいろいろと試してみるのが良いと思います。
一応、

a {
padding-top: 5px;
padding-left: 5px;
padding-bottom: 10px;
padding-right: 25px;
}

内容は適当に書いたものですが、このスタイル指定を追加してみてください。 これを応用すれば、ある程度は対応できると思いますよ。 ただ、こちらの場合は、リンクの入っているボックスのサイズなどの関係上、スタイルシートだけで対応するより、JavaScriptを使ってスタイルシートを操作する方法のほうが、ソース的にも表示上でも綺麗にまとまるかもしれません。

ちなみに、上記のいずれの効果も、JavaScriptによる操作で代行することが可能な範囲だとは思います。 もしJavaScriptの使用の方が都合が良いのであれば、JavaScriptで同様の効果を適用させるようにしても良いでしょう。

参考まで…

お礼

最近スタイルシートをかじり出してまったくわかってない私に詳しく教えてくださってありがとうございます。
ソースは見てたりしてたんですが外部スタイルシートが見れるって事はしりませんでした（照れ
両方ともちゃんと答えていただき本当に助かります
これからお行儀よくないかも知れませんが外部スタイルシート見て勉強してきます。
また自分なりに調べてもわからない時には質問したりすると思いますがその時はまたよろしくお願いします。

回答No.5

tontom

リンクに触れたときに、全体の背景色を変えるには、CSSでもできます。

参考URLで詳しく説明されているので、ぜひ覗いてみてください。

参考URL：

http://allabout.co.jp/computer/hpcreate/closeup/CU20020709A/index.htm

お礼

お返事遅くなってすいませんでした！
色々やってみてできました
でも違う方法も知っておきたいので参考にさせていただきます。
本当にありがとうございました。

回答No.3

shy00

おっと、すいません
左のメニューのことですよね？

これは、バックに画像を置いており、

a:hover {
color : #080;
background-color : transparent;
text-decoration : none;

で、マウスがのったときに透けさせる設定にしているだけでは？
　時間が無く試していませんけど(爆)

お礼

早速やってみましたができませんでした；；
私のやり方がおかしいのかも…
でもこのやり方は想像もしませんでした。
こんなに早く答えてくださって本当にありがとうございました。

回答No.2

noname#165597

画像のは・・・

以下のサイトで分かりやすいです。
こっちが正しいです

参考URL：

http://lovepuppy.fc2web.com/html/gazou-asobi.html

お礼

ありがとうございます。
参考URL早速見させてもらいました。
これから見て活用していきたいと思います。
本当にありがとうございました。

回答No.1

shy00

とりあえず「画像」といわれている部分だけ・・・
title=""を付けているだけです
<a href="******" title="">