CSS:hoverでナビボタンの背景画像を変えたいのですが・・

質問

CSS:hoverでナビボタンの背景画像を変えたいのですが・・

ナビボタンの左端に20pxくらいの余白をあけたいと思い、

#navi li{
list-style-type: none;
line-height: 38px;
font-size: 14px;
padding-left: 20px;
}

としていました。が、hoverで背景画像が変わるように設定したところ、
Paddingの部分だけリンクが無効になっていて、変更画像が右に20pxずれて表示されます。
（リンク元のテキストの始まる部分からしかリンクが有効にならないので）
display:block;の設定もしています。

結局、私の知識ではPadding-leftを削除して、テキストの左側にスペースを挿入するという
不細工な方法でしか思い通りの表示がされない状況です。

CSSでの正しい設定方法を教えていただけないでしょうか。

回答No.3

fujillin · ベストアンサー

No1です。

N02様がすでにお答えですが…

＞「IEを除く」とは？
IEはリンク要素以外にhoverは設定されていません。

どのような全体構成なのか不明ですが、動作するようにするには
1）a要素をブロックにしてサイズを設定し、a要素の背景を変えるようにする
　（文字の表示位置の調整が必要かと思われます。）
　（＝No2様のご回答）

2）IEでもリンク要素以外のhoverが可能なようにして、li要素の背景を変える。
　　　↑javascriptのライブラリを利用。　（ぐぐればすぐに見つかると思います）

のような方法が考えらます。

*他のサイトで実現できているのたいていのことは、ご自分でも実現可能です。
　ソースを見たり解説サイトを見るなどで、仕組みを研究してみましょう。

お礼

2度もありがとうございました。
おかげで思い通りの表示ができました。

回答No.2

rurino

#navi li{ list-style-type: none; line-height: 38px; font-size: 14px; }
#navi li a:link { background: #39f;display: block;padding-left: 20px;}
#navi li a:visited { background: #39f;display: block;padding-left: 20px;}
#navi li a:hover { background: #06c; display: block;padding-left: 20px;}
#navi li a:active { background: #39f;display: block;padding-left: 20px;}

liでなく
a要素の中に記述してあげれば行けるんではないかと思うのですが、いかがでしょうか。

お礼

ありがとうございました！
できました。

回答No.1

fujillin

CSSはよくわかってませんが…

ご提示のものがli要素なので、

#navi li{
list-style-type: none;
line-height: 38px;
font-size: 14px;
padding-left: 50px;
background-image: url(back1.gif);
}

#navi li:hover {
background-image: url(back2.gif);
}

ってことでしょうか？
これはこれで、ずれることなく動作すると思いますけれど。（IEは除く）

あるいは、HTMLソースが
<li><a href="xxx">XXX</a></li>
のようになっていて、li要素に背景を設定しておいて、

a:hover { background-image: ～～; }
のようにa要素にhoverを設定しているのでしょうか？
もしそうであれば、a要素にはpaddingがかかっているのでご質問のようになるのは当然ですよね？

違ってたら失礼。

補足

ご指摘のとおりです・・・。

ということで、li:hoverに書き換えましたが、
今度はまったく動作しなくなりました。
（IE8だと動作すると思うのですが・・・「IEを除く」とは？）

#navi li{
list-style-type: none;
line-height: 38px;
font-size: 14px;
padding-left:20px;
background-image: url("./image/aaa.png");
background-repeat: no-repeat;
height: 40px;
width: 200px;
}

#navi li:hover{
background-image: url("./image/bbb.png");
}

結局、あの不細工な方法しかないのでしょうか・・・。