HPの作成について質問です。cssを用いてある画像にカーソルを合わせる

質問

HPの作成について質問です。cssを用いてある画像にカーソルを合わせると、別の画像が現れるという効果をつけたいと思っています。下記のような(該当部分と思われるところ)htmlとcssを作成したのですが、画像の１の部分だけがカーソルにあわせた画像が繰り返された画像となります。また画像の２の部分が画像にカーソルを合わせるとなぜか消えてしまいます。アドバイスお願いします。

＊HTML
<div id="naraberu">
<ul>
<li class="Qone-one"><a href="kikimashita1.html"></a></li>
（省略）
<li class="Qone-twelve"><a href="kikimashita1.html"></a></li>
<li class="Qone-thirteen"><a href="kikimashita1.html"></a></li>
<li class="Qone-fourteen"><a href="kikimashita1.html"></a></li>
<li class="Qone-fiveteen"><a href="kikimashita1.html"></a></li>
<li class="Qone-sixteen"><a href="kikimashita1.html"></a></li>
<li class="Qone-seventeen"><a href="kikimashita1.html"></a></li>
<li class="Qone-eighteen"><a href="kikimashita1.html"></a></li>
<li class="Qone-nineteen"><a href="kikimashita1.html"></a></li>
<li class="Qone-twenty"><a href="kikimashita1.html"></a></li>
<li class="Qone-twentyone"><a href="kikimashita1.html"></a></li>
</ul>
<!--end div#naraberu-->
</div>
*CSS
#naraberu {
position: relative;
margin-top: 10px;
margin-left: 20px;
width: 400px;
height: 1000px;
}
#naraberu a{
display:block;
width:64px;
height:79px;
}
#naraberu a:hover{
position: absolute;
left: 380px;
top: 90px;
display:block;
width:210px;
height:278px;
}
(省略)
.Qone-fourteen a {
background-image: url(../images/card_moto.png);
}
.Qone-fourteen a:hover {
background-image: url(../images/card_example.png);
}
.Qone-fiveteen a {
background-image: url(../images/card_moto.png);
}
.Qone-fiveteen a:hover {
background-image: url(../images/card_example.png);
}
.Qone-sixteen a {
background-image: url(../images/card_moto.png);
}
.Qone-sixtten a:hover {
background-image: url(../images/card_example.png);
}
(省略)
.Qone-nineteen a {
background-image: url(../images/card_moto.png);
}

.Qone-nineteen a:hover {
background-image: url(../images/card_example.png);
}
.Qone-twenty a {
background-image: url(../images/card_moto.png);
}
.Qone-twentyone a:hover {
background-image: url(../images/card_example.png);
}

回答No.2

kawacchi · ベストアンサー

質問内に記述されていない部分なのであくまでも推測ですが、
liまたはa要素に対して「float:left」を宣言していませんか？
a要素のマウスオーバー時に、ポシション指定で右側に移動させていますね。
その移動して空いた部分に後続のa要素が詰めて表示されるため、
２の画像が消えたように見えるのではないかと思います。
現在、すべて同じ画像を使用されているのでわかりにくいと思いますが、
それぞれ違う画像を表示させてみるとわかるのでは？
マウスオーバーでマウスの範囲外に画像を移動させ、
マウスオーバーでなくなったため瞬時に元の位置に戻る・・・。
おそらく画像がチラチラして見えると思いますよ。

お礼

回答ありがとうございます。
参考になりました。

補足

回答いただきありがとうございます。
確かにli要素に『float: left;』を指定してました。

kawacchiさんの説明ですと、２の画像だけでなく、他のものも消えたように見えないとおかしいのかなぁとおもってしまいます。いかがでしょうか？

おなじ画像にしているのも分かりにくくなっている原因だと思いますので、違う画像で試してみます。
教えていただきありがとうございます。

回答No.1

zeff

「１」の部分と言うのが1番目から20番目のことなのか、
15番目だけなのかわからなかったのですが、
(fiveteenでなくfifteenのような）。

background-repeatは何も指定しないと
初期設定がrepeatになるので、
そこを追加してやればよいです。

http://www.htmq.com/style/background-repeat.shtml

#naraberu a{
display:block;
width:64px;
height:79px;
/*背景画像を繰り返さない*/
background-repeat:no-repeat;
}

#naraberu a:hover{
position: absolute;
left: 380px;
top: 90px;
display:block;
width:210px;
height:278px;
/*背景画像を繰り返さない*/
background-repeat:no-repeat;
}

それと以下をケアレスで指定し忘れているので、
画像が消える（表示されていない）現象が起こっているのでは。
21番目だけでなく20番目も。

.Qone-twenty a {
background-image: url(../images/card_moto.png);
}
/*お忘れです*/
.Qone-twenty a:hover {
background-image: url(../images/card_example.png);
}
/*お忘れです*/
.Qone-twentyone a {
background-image: url(../images/card_moto.png);
}
.Qone-twentyone a:hover {
background-image: url(../images/card_example.png);
}

状況を再現できないので論理だけですが、
変だなと思った点を指摘させていただきました。

お礼

回答ありがとうございます。
参考になりました。

補足

回答いただきありがとうございます。
『１』というのは、15番目のみという意味で書きました。
分かりにくくて申し訳ありません。
15のスペルに関してもご指摘ありがとうございます。

ご指摘どおり、background-repeatの設定をしました。
繰り返さない画像にすることができました。
しかし、私はA画像→B画像にしたいのですが、A画像→A画像になってしまいます。
しかも、画像のはじと、中心でカーソルを置いたときにうつる画像が違ってしまっているのです。
なぜか分かりますでしょうか？

また、指定忘れの件ですが、私の自分のCSSの写し間違いでした。元のCSSではa:hover,aに関する指定がされておりました。正確な情報を伝えられず手間を取らせてしまい、申し訳ありませんでした。