1

我找到了几篇有帮助的相关文章，但我碰壁了。

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

让图像出现在悬停时：

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