html - 悬停在链接后面的图像

Question

我发现了几篇相关文章对我有帮助，但我遇到了困难。

我有一个菜单导航，当用户将鼠标悬停在链接上时会发生两件事:链接改变颜色并且图像出现在链接后面。现在，链接正在改变颜色并显示图像，但它出现在文本链接的前面。我不知道如何让图像出现在文本后面。

让图像在悬停时出现:

#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>

我是初学者，所以如果您在这段代码中看到任何其他可以帮助您的地方，请告诉我。提前致谢!

Answer 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*/