仅在悬停时显示文本，输入框

Question

嘿家伙我需要帮助我有这个样式表，里面这是管理员...它目前宽度为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

这就是你要找的吗？这样可以防止任何文本出现在父元素之外。