CSS鼠标悬停重叠标签？

Question

我有一些标签.

http://img196.imageshack.us/img196/7167/tabs.gif

我想添加翻转效果.问题是,标签相互重叠,因此没有好的地方可以将它们分开.我应该使用绝对定位和PNG来堆叠它们,还是有更优雅的解决方案？

Answer 1

使用具有alpha透明度的24位PNG ..然后它们重叠并不重要.您可以将它们放置在左侧浮动的线条中,并留下负边距(如果标签未预先确定,则非常有用),或者如您所说,您可以绝对定位它们.

请注意,在IE6中,不支持alpha trans.所以也许你想要没有24位透明图像的目标浏览器,或尝试使用ie6pngfix.

这里是你有什么可以做

<ul>
    <li><a href="">link1</a></li>
    <li><a href="">link1</a></li>
    <li class="active"><a href="">link2</a></li>
</ul>

ul li {
    display: block;
    float: left;
    margin-left: -20px;
    background: url(path/to/image.png) no-repeat;

}

ul li:hover { /* will not work in ie6 - either change the background to the anchor, or add a slice of js */
     background-position: -200px 0; /* i'm using sprites in this example */
}

ul li:first-child {
    margin-left: 0;
}

ul li.active {
    position: relative; /* Mark reminded me I needed to set a position other than static */
    z-index: 100;
}