텍스트 만 표시하고 입력 상자는 호버에 넣으십시오

Question

안녕하세요 여러분, 제가이 스타일 시트를 가지고 있고 이것이 관리자 div입니다. 도움이 필요합니다 ... 현재 폭 20px, 높이 50px이며 마우스 포인터로 마우스 커서를 올리면 커서가 커집니다. . 내가 무슨 일이 일어나고 싶은지 텍스트와 입력 상자를 확장하면 마우스 포인터를 가져 가면 표시됩니다. 현재 심지어 내 텍스트가이 div 안에 있습니다 .. 텍스트가 여전히 중복됩니다 .. 도움이 필요합니다. ..

PS :이 내 로그인 입력 상자를 넣어 메신저 ..

HTML

<div id="admin"> 
     <p>Admin</p> 
     <p> 
     <input type="text"> 
     </p> 
    </div> 

CSS

 #admin{ 
width: 20px; 
height: 50px; 
color: white; 
background-color: #000080; 
position: absolute; 
bottom: 10px; 
-webkit-transition:width 2s; 
    transition:width 2s; 
    } 
    #admin:hover{ 
width: 500px; 
visibility: visible; 
     } 

Answer 1

이 원하는 효과 : Demo?

<div id="admin"> 
    <p>Admin 
     <input type="text"/> 
    </p> 
</div> 

#admin { 
    overflow:hidden; 
    width: 20px; 
    height: 50px; 
    color: white; 
    background-color: #000080; 
    position: absolute; 
    bottom: 10px; 
    -webkit-transition:width 2s; 
    transition:width 2s; 
} 
#admin p { 
    white-space:nowrap; 
} 
#admin:hover { 
    width: 500px; 
    visibility: visible; 
} 

Answer 2

overflow-y:hidden;

또는

overflow:hidden

당신이 찾고 무엇인가요? 이렇게하면 부모 요소 외부에 텍스트가 표시되지 않습니다.