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

Answer 2

我认为您需要打破标签以使重叠是单独的图像，然后根据前面的标签强制更改这些图像。滚动可能会影响多个目标。

Answer 3

您可以尝试以下方式：

#recent a + #friends a：hover {

background-image: url('recent-normal-neighbor-hover.png') no-repeat;

}

#friends a：悬停{

 background-image: url('friends-hover-neighbor-normal.png') no-repeat;

}

不确定这是否有意义，并且它不是很优雅，因为您必须为所有三个标签制作常规图像，所有三个标签的常规图像，相邻标签的剪切部分具有悬停状态和所有三个选项卡的悬停图像。然后你需要有6个CSS选择器。

Answer 4

您可以使用相对定位将每个标签向左移动，使其显示在之前的标签上。为了使其正常工作，您需要每次增加正确的位置，例如：

HTML

<ul>
   <li id="tab1"><a href="#">Tab1</a></li>
   <li id="tab2"><a href="#">Tab2</a></li>
   <li id="tab3"><a href="#">Tab3</a></li>
   <li id="tab4"><a href="#">Tab4</a></li>
</ul>

CSS

#tab2 {
   position:relative;
   right:30px; /* overlap distance */
}
#tab3 {
   position:relative;
   right:60px; /* double overlap distance */
}
#tab4 {
   position:relative;
   right:90px; /* triple overlap distance */
}

Answer 5

这是我采用的解决方案：

HTML

<ul id="tabs">
    <li class="upload"><a href="/upload"></a></li>
    <li class="friends"><a href="/friends"></a></li>
    <li class="recent"><a href="/recent"></a></li>
</ul>

CSS

#tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: auto;
    position: absolute;
    bottom:0;
    right:0;
}

#tabs li {
    position: relative;
    float: right;
    width: 182px;
    height: 49px;
}

#tabs li a {
    display: block;
    width: 182px;
    height: 49px;
}

#tabs .upload {
    background: transparent url(/img/upload.png) no-repeat top left;
    z-index: 3;
}

#tabs .friends {
    background: transparent url(/img/friends.png) no-repeat top left;
    margin-right: -34px;
    z-index: 2;
}

#tabs .recent {
    background: transparent url(/img/recent.png) no-repeat top left;
    margin-right: -31px;
    z-index: 1;
}

CSS鼠标悬停重叠标签？

5 个答案:

HTML

CSS