0

同様の問題がある多数の投稿を調べましたが、問題がわかりません。誰か助けてください、それは私を狂わせています。

以下のコードは、私のサイト ナビゲーション用です。背景を単なる背景色ではなく画像にしたいと思います。また、ホバー時に背景画像を変更したいと思います。私たちのミーアキャットの友達が言うように...単純です!....しかし、私にとってはそうではありません.

<div class="sub-menu" id="sub-menu">
<ul>
<li><a class="on" href="#" title=" You Are Here ">&raquo; Overview</a></li>
<li><a href="graduates-endorsements.html" title=" What Clients Say About The Programme ">Endorsements</a></li>
<li><a href="graduates-programme.html" title=" Programme Focus, Programme Leader and Venues ">The Detail</a></li>
<li><a href="graduates-funding.html" title=" Delegate Sponsored Places and Busaries ">Funding</a></li>
<li><a href="graduates-apply.html" title=" Online application Form ">Apply Online</a></li>
<li><a class="end" href="graduates-terms.html" title=" Terms &amp; Conditions ">Terms</a></li>
</ul>
</div>


div.sub-menu { position: relative; width: 920px; height: 40px; padding: 0; margin: 0;  border-top: solid 1px #FFFFFF; }
#sub-menu ul { list-style: none; padding: 0; margin: 0; }
#sub-menu li { float: left; margin: 0; }
#sub-menu li a { padding: 0 30px; width: 93px; height: 40px; line-height: 36px; text-align: center; float: left; display: block; color: #FFFFFF; text-decoration: none; background-color: #555555; border-right: solid 1px #858585; }
#sub-menu li a:hover { color: #050505; background-color: #f3b607; }
#sub-menu li a.on { background-color: #555555; color: #FBAF5D; cursor: default; }
#sub-menu li a.end { width: 89px; }
#sub-menu li a.end-on { text-align: center; float: left; display: block; color: #FBAF5D; text-decoration: none; border-right: none; }


/* Hide from IE5-Mac \*/
#sub-menu li a{ float: none }
/* End hide */

#sub-menu { font-weight: normal; font-size: 14px; font-family: verdana; }

ありがとうございます。

4

1 に答える 1

0

質問の件名で、「li」タグに背景画像を配置したいとおっしゃっていましたが、表示されたコードに従って、「a」タグに背景を指定しています。

"li" と "a" のタグのいずれかに、背景画像と色の両方を一緒に入れることができます。

例えば。background: #00ff00 url('smiley.gif') no-repeat fixed center; 詳細については、 http ://www.w3schools.com/cssref/css3_pr_background.asp を参照してください。

ホバーエフェクトも入れたい場合は、アンカー「a」タグに実装してください。ie6 のような古いブラウザには、li ホバー効果のサポートが組み込まれていないためです。

次のパターンを使用します。

a{
   background:   url('img1') no-repeat fixed center; 
}
a:hover{
   background:   url('img2') no-repeat fixed center; 
}

お役に立てば幸いです。

于 2012-08-24T11:55:45.423 に答える