溢出:hidden 隐藏边框但不隐藏溢出的元素

Question

我正在制作带有过渡效果的标题，但是有些地方不起作用。

我将ul设置为120px，li设置为60px，并且给li:hover添加了一个translateY(-60px)。这样当你悬停在li上时，它就会弹出来。

我想隐藏溢出的内容，直到你悬停在它上面。但是似乎不起作用。它只会悬停隐藏li的边框。

有人知道原因吗？

提前感谢您！

<header>
    <ul>
        <li>
            <a id="p1" href="#">Vibe</a>

            <a id="p2" href="#">Vibe</a>
        </li>
        <li>
            <a id="p1" href="#">Creations</a>

            <a id="p2" href="#">Creations</a>
        </li>
        <li>
            <a id="p1" href="#">Vision</a>

            <a id="p2" href="#">Vision</a>
        </li>
        <li>
            <a id="p1" href="#">Just tell us</a>

            <a id="p2" href="#">Just tell us</a>
        </li>
    </ul>
</header>

这是CSS样式表：

header {
height: 60px;
width: 100%;
background-color: #34495e;
}

header ul  {
    margin-right: 20px;
    float: right;
    height: 60px;   
    overflow: hidden;
}

header ul li {
    display: inline-block;
    height: 120px;
    padding-left: 40px;
    padding-right: 40px;
    overflow: hidden;
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    overflow: hidden;
    border-left: 1px solid #2c3e50;
}

header ul li a {
    text-decoration: none;
    line-height: 60px;
    font-size: 14px;
    font-family: "lato", sans-serif;
    font-weight: 700;
    color: #e74c3c;
    text-transform: uppercase;
    -webkit-transform: rotate(10deg);
}

#p2 {
    position: absolute;
    text-align: center;
    color: #c0392b;
    line-height: 60px;
}

header ul li:hover {
    -webkit-transform: translateY(-60px);   
}

- user3226657

---

请创建一个JSFiddle。顺便说一句...ID（例如#p1）每个页面只能使用一次。您应该将ID更改为类。 - Paulie_D

Answer 1

添加

position: relative;

关于你的ul类

这里是jsfiddle http://jsfiddle.net/2jabu/

- David Hariri

---

谢谢！那个方法完全有效；）但我可以问一下，为什么我必须将position:relative添加到ul类，而不是li类？因为我在li中使用了position:absolute来控制.p2的位置。 - user3226657

Answer 2

这里有一个可能适合你的解决方案： 示例Fiddle 首先，id应该保留给单一用途。你的#p1和#p2最好写成类。要解决你的问题，只需要在最高级别容器上（在这种情况下是标题）使用overflow:hidden;。另外，由于你给了#p2绝对定位，你还需要给标题position:relative;。

CSS：

header {
  // existing styles

  position: relative;
  overflow: hidden;
}

- badAdviceGuy

---

这太完美了。谢谢你。我以为我必须给ul一个position:relate，因为它是父级元素。但它也适用于最高级别的容器。太棒了。 - user3226657

当您将元素的位置设置为absolute时，它将基于最近的具有position: relative;属性的容器进行定位。 - badAdviceGuy