Erweiterung auf schweben topbar Nav Links zu zeigen

Question

Ich versuche, eine topbar auszukommen Hover zu erweitern verborgenen Text zu zeigen, die Social-Media-Symbole sein könnte, nav Links usw.

Allerdings bin ich nicht sicher, wie das verbergen Text, wie er auf und über dem darunterliegenden div erscheint.

Dies ist mein (einfach) Code

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

Wie Sie sehen, die Können Sie mich sehen wird über die „linke“ Text erscheinen vor schwebt

Answer 1

Sie müssen overflow: hidden; auf das übergeordnete Element bewegen (.top) weil es das Kind ist, .invisible, das außerhalb von .top überläuft.

.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>