html - 悬停时展开顶部栏以显示导航链接

Question

我正在尝试让顶部栏在悬停时展开以显示隐藏的文本，这些文本可能是社交媒体图标、导航链接等。

但是我不确定如何隐藏出现在下方 div 上的文本。

这是我的(简单的)代码

html

<div class = "top"> This is the top
<div class = "invisible">can you see me</div>
</div>


<div class = "container">
<div class = "left">left</div>
<div class = "right">right</div>


</div>


This is my css

.top {
width : 100%;
background : blue;
padding-bottom : 25px;
position : relative;
}

.invisible {
position : absolute;
overflow: hidden;
top : 90%;
}

.top:hover {
padding-bottom : 150px;
background : yellow;

}

.container {
display : flex;
}

.left {
width : 50%;
background : red;
}

.right {
width : 50%;
background : green;
}

如您所见，在悬停之前“你能看到我吗”出现在“左侧”文本上

Answer 1

您需要将 overflow: hidden; 移动到父元素 (.top) 因为它是子元素，.invisible溢出到 .top 之外。

.top {
  width: 100%;
  background: blue;
  padding-bottom: 25px;
  position: relative;
  overflow: hidden;
}

.invisible {
  position: absolute;
  top: 90%;
}

.top:hover {
  padding-bottom: 150px;
  background: yellow;
}

.container {
  display: flex;
}

.left {
  width: 50%;
  background: red;
}

.right {
  width: 50%;
  background: green;
}

<div class="top"> This is the top
  <div class="invisible">can you see me</div>
</div>

<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
</div>