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

}

图像显示在悬停链接后面

1 个答案: