CSSについての質問

質問

CSSでロールオーバーを指定しています。
a:hover{backgorund-color:#FF0000;}

これを指定したのですが、一部リンク範囲が一文字目だけに指定されているようで、何故かリンクの一文字目を選択しないとロールオーバーしません。
こういう現象は初めてで、どう対処したらいいのかわからないのでご教授お願いします。

例えば、HTMLが
<a>テスト</a>
となっていると
[テ]の部分を選択しないとリンクされない。

しかも何故かごく一部の箇所だけなんです。
リストが複数並んでるとして、

・テスト1
・テスト2
・テスト3
・テスト4
・テスト5
・テスト6

[テスト1~4]が上記の現象になってしまいます。

回答No.3

noname#176637 · ベストアンサー

頂いたCodeで試しましたが、こちらでは再現しませんでした。

ただ、ちょっとおや？と思ったのですが・・・

＞a:hover{backgorund-color:#FF0000;}

これ、このまま使われていますか？
「background-color」になっていないので、このままだとしたらこれが原因でしょうか。

ここだけの記述ミスでしたら、他に考えられるのは、NaviLを括っている他の要素がちゃんと括られていないか、要素のサイズを指定しておらず、意図せず部分的オーバーレイ状態になっているとかではないでしょうか。

一度このNaviLの部分だけを切り出してテストしてみて、再現テストしてみてください。

お礼

backgroundはここだけのミスですw

＞意図せず部分的オーバーレイ状態になっているとかではないでしょうか。
まさにこの通りでした。部分的に起動したらしっかり動きました。まだ解決はしていませんが、オーバーレイになっている箇所を探そうと思います。
ありがとうございました＾＾

回答No.2

ORUKA1951

firefox+firetabで、後述のブロックがかぶさっていませんか？
確認のため
li a{z-index:100;}
でも加えてみたら？

補足

だめでした＾＾；

回答No.1

noname#176637

まず、以下のチェックはお済でしょうか？

・ＩＥ FireFox Chrome でテストし、再現性があるか
・直タグのみで書いて再現性があるか

また、実際にCSSを適用している部分のHTML Codeはどうなっていますか？
実際のコードを全て載せないと分かり辛いです。

憶測で言わせていただくと、例からしてリストに対して適用されていのでしょうか
そうなるとよくあるミスとして、<ul><li>テスト<li>テスト<li>テスト</ul>のように括りが省略されている場合に誤作動します
<ul><li>テスト</li><li>テスト</li><li>テスト</li></ul>このように正しく記述されていますか？

補足

チェッカーで100点取ってますので
HTMLタグは間違ってはいないと思います。
<ul>
<li><a href=""></a></li>
</ul>
になっております。

確認動作環境はchrome,FireFox,IE7,safariです。
すべてのブラウザにおいて同じ動作になります。

補足CSS

#naviL{
width:177px;
height:auto;
float:left;
margin:13px 0 0 0;
}
#naviL ul{
clear:both;
line-height: 1.0;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
padding:10px 0 0 0;
}
#naviL li{
clear:both;
margin: 0;
font-size: 16px;
padding:0 0 10px 14px;
}
#naviL a{
width:100%;
height:auto;
line-height:1.0;
padding: 5px 0 5px 0;
text-decoration:underline;
}