溢出:隐藏的隐藏边框，但不是溢出的元素 [英] overflow:hidden hiding borders but not the element that overflows

问题描述

我正在处理带有过渡的标头.但是有些东西行不通.

I'm working on a header with a transition. But something is not working.

我将ul设置为120px，li设置为60px. 然后我给li:hover了一个translateY(-60px).这样，当您将鼠标悬停在li上时，它就会弹出.

I made the ul 120px and li 60px. And I gave the li:hover a translateY(-60px). So that it pops up when you hover over the li.

我想隐藏溢出的内容，直到将鼠标悬停在上面.但这似乎不起作用.它的确会悬停隐藏正在溢出的li的边框.

I want to hide the content that is overflowing until you hover over it. But it doesn't seem to work. It does hover hide the border of the li that is overflowing.

有人知道为什么吗?

先谢谢您！

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

推荐答案

以下是一种可能对您有用的解决方案:

Here is one solution that may work for you:

小提琴示例

Example Fiddle

第一个ID应该保留一次使用.您的#p1& #p2最好写成类.要解决您的问题，您只需要在最高级别的容器上使用overflow:hidden;，在这种情况下为标头.同样，由于已给定#p2的绝对位置，因此还需要给标头position:relative;.

First id's should be reserved for single uses. Your #p1 & #p2 would be better written as classes. To solve your problem you only need overflow:hidden; on the highest level container, in this case the header. Also since you've given #p2 absolute position, you also need to give the header position:relative;.

CSS:

header {
  // existing styles

  position: relative;
  overflow: hidden;
}

这篇关于溢出:隐藏的隐藏边框，但不是溢出的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！