Question

我正在尝试使用顶部栏来扩展Hover以显示隐藏的文字，这些文字可能是社交媒体图标，导航链接等。

但是我不确定如何隐藏文本，因为它出现在下面的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>

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

1 个答案: