html - 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;
}