CSSで背景画像マウスオーバー

質問

スタイルシートのマウスオーバーについて質問です。

<div class="AAA">
<div style="margin-top: 22px;"><img src="http://xxxxx.gif"></div>
</div>

（css）ーーーーーーーーーーーーーーーーーーーーーーーー

.AAA { background-image: url("http://xxxxx_back.gif") }

上記の状態で、「xxxxx.gif」の背景に「xxxxx_back.gif」を表示させるまでは
思い通りに出来たんですが、
背景表示はマウスオーバーの時だけにしたかったので、

<div class="BBB">
<div style="margin-top: 22px;"><img src="http://xxxxx.gif"></div>
</div>

（css）ーーーーーーーーーーーーーーーーーーーーーーーー

.BBB a:hover { background-image: url("http://xxxxx_back.gif") }

という風にしたんですが、
BBBにすると、オーバー時の表示は出来ましたが、背景画像がズレてしまいます。
AAAの時の表示位置は正確です。

AAAとBBBの違いは常時表示か、マウスオーバー表示かの違いしかないと思うのですが、
何故でしょうか。

※safariで検証しました。
※style="margin-top: 22px;"は都合上入れてます。

回答No.2

tenderfeel · ベストアンサー

<div class="AAA">
<div style="margin-top: 22px;"><img src="http：//xxxxx.gif"></div>
</div>

<div class="BBB">
<div style="margin-top: 22px;">
<a href="http：//zzzzz.html"><img src="http：//xxxxx.gif"></a>
</div>
</div>

.AAA { background-image: url("http：//xxxxx_back.gif") }
.BBB a:hover { background-image: url("http：//xxxxx_back.gif") }

.AAAが親要素の背景を指定しているのに対し、
.BBBのaはmargin-top:22pxしているdiv要素の中に入ってるので、背景がズレるというのは記述どおりの仕様です。
marginは都合上ということですが、aをブロック要素にしてaにmarginかpaddingを指定すれば.AAAと同じになると思います。

<div class="BBB">
<a href="http：//zzzzz.html"><img src="http：//xxxxx.gif"></a>
</div>
.BBB a { display:block; padding-top:22px; }
.BBB a:hover { background-image: url("http：//xxxxx_back.gif") }

お礼

こんな読みにくい質問なのに、大変解りやすい回答を有り難うございました。
この回答の方法で解決しました！
display:blockがよく解らないんですけど。。（あとでググります。。）

ちなみにマージンの都合についてですが、
画像をコンテンツメニューとして縦に複数貼る予定だったので、
くっつかないようにする処置として入れていました。
なので、ひとくくりには出来ず、、

<div>
<div class="BBB">
<a href="http：//zzzzz_1.html"><img src="http：//xxxxx_1.gif"></a>
</div>
<div class="BBB">
<a href="http：//zzzzz_2.html"><img src="http：//xxxxx_2.gif"></a>
</div>
<div class="BBB">
<a href="http：//zzzzz_3.html"><img src="http：//xxxxx_3.gif"></a>
</div>
<div class="BBB">
<a href="http：//zzzzz_4.html"><img src="http：//xxxxx_4.gif"></a>
</div>
</div>

.BBB a { display:block; margin-top:22px; }
.BBB a:hover { background-image: url("http：//xxxxx_back.gif") }

という感じで解決させました。
スマートじゃない気もしますが、、とりあえずこれがスキルの限界です。

とりあえず、有り難うございました。

回答No.1

salonpath

.BBBの中にaが見当たらないんですけど本当にhover反応しました？

仮に以下の位置に<a>が入ってると仮定して考えても
<div class="BBB">
<div style="margin-top: 22px;"><a href="#"><img src="​hoge.gif"></a></div>​
</div>

hoge.gifが透過してない限り背景画像は表示されないと思うんですけど？

>>AAAとBBBの違いは常時表示か、マウスオーバー表示かの違いしかないと思うのですが、

.AAAはdivに背景指定で
.BBB a:hoverはaに背景を指定してるので違いますよ

お礼

こんな読みにくい質問に回答していただき、有り難うございます。

>.BBBの中にaが見当たらないんですけど本当にhover反応しました？

はい。
ちなみに、ここでは省きましたが、画像にリンクのための

<div style="margin-top: 22px;">
<a href="http://zzzzz.html"><img src="http://xxxxx.gif"></a>
</div>

というタグを付けていたので、<a>はこれが反応したという事でしょうか。。。

gif画像は透明にしています。
なのでAAAの時の表示は正確です。

>>AAAとBBBの違いは常時表示か、マウスオーバー表示かの違いしかないと思うのですが、

>.AAAはdivに背景指定で
>.BBB a:hoverはaに背景を指定してるので違いますよ

なるほど！何となく見よう見真似で
やっていましたが、aが関わっているんですね。

それを踏まえて、もう少しやってみます。
有り難うございました。