1

参考になる関連記事をいくつか見つけたのですが、壁にぶち当たりました。

ユーザーがリンクにカーソルを合わせると、2 つのことが起こるメニュー ナビゲーションがあります。リンクの色が変わり、リンクの後ろに画像が表示されます。現在、リンクの色が変わり、画像が表示されていますが、テキスト リンクの前に表示されています。画像をテキストの後ろに表示する方法がわかりません。

画像をホバー時に表示するには:

#menu a:hover span.blognav{
position: absolute;
left: -42px;
top: 4px;
width: 190px;
height: 15px;
background: url("AVSprite-menu.png");
background-position: 0px -1px;
}

#menu a:hover span.artnav{
position: absolute;
left: -42px;
top: 40px;
width: 190px;
height: 15px;
background: url("AVSprite-menu.png");
background-position: 0px -39px;
}

#menu a:hover{
color: #29fffa;
}


<div id="menu">
<ul style="list-style-type: none;">
    <li><a href="blog.html">Blog<span class="blognav"></span></a></li>
    <li><a href="about.html"><font color="#29fffa">About</font></a></li>
    <li><a href="art.html">Art<span class="artnav"></span></a></li>
    <li><a href="print.html">Print</a></li>
    <li><a href="web.html">Web</a></li>
    <li><a href="events.html">Events</a></li>
    <li><a href="marketing.html">Marketing</a></li>
    <li><a href="contact.html"><font color="black">Contact</font></a></li>
</div>

私は初心者なので、このコードで他に役立つことがあれば教えてください。前もって感謝します！

4

1 に答える 1

1

http://jsfiddle.net/8sxxy/これがうまくいくかどうかを確認してください..z-indexを追加しました

a
 {
    position: relative;
    z-index: 5;
}



#menu a:hover span.blognav{
position: absolute;
left: -42px;
top: 4px;
width: 190px;
height: 15px;
background: url("http://s20.postimage.org/ospccawhp/35436251_1_620x433.jpg");
background-position: 0px -1px;
z-index: -5; /* you need to add this too*/

}

于 2012-12-28T16:18:41.763 に答える