html - Only show texts, input boxes on hover -
hey guys need have stylesheet , inside admin div...its in 20px in width , 50px in height , when hovered mouse pointer goes larger..what happen when hover mouse pointer there expand texts , input boxes shows.... texts inside div.. texts still overlapping.. need help..
ps: im putting login input boxes there..
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; }
is desired effect: 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; }
Comments
Post a Comment