html - 悬停时仅显示文本、输入框

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